Hugging Face's logo

Spaces:
yourgui
/
undefined
Running

App Files Community
yourgui commited on
Commit
8f1ce1a
·
verified ·
1 Parent(s): 105acb8

add two more integrations like claude and grok / X

Browse files

add a section on the website - "where VAgents come in", example:
- build an app in a day with 8 experts working together, each with 50x the speed of a human"
- your lifestyle becomes about ideas, responding ( connecting to people), making decisions - it's going to be exciting and we won't spend time in front of the computer as much as today is needed. it will be great ! you can elaborate on that tone. show also a section "total hours saved" and then put "real screenshots" (albeit their just generated by us for now) of the stats section of vagents, where you see daily which agent has saved you how much on a graph (day by day - columns + curve line)

i dont like the blue, find another color.
let's go and then let's build out the agents dashboard, how it would look.
- simple 1/ 2/4/8 split OR dynamic agent (where agents that require attention are in the middle and others are below in smaller and dark
also show which ai which agent is using as an icon (like show the n8n logo small somewhere if it's calling n8n)

Files changed (1) hide show
  1. index.html +198 -10
index.html CHANGED
@@ -13,11 +13,11 @@
13
  extend: {
14
  colors: {
15
  primary: {
16
- 100: '#e0f2fe',
17
- 500: '#0ea5e9',
18
- 900: '#0c4a6e'
19
  },
20
- secondary: {
21
  100: '#f5f3ff',
22
  500: '#8b5cf6',
23
  900: '#4c1d95'
@@ -165,9 +165,127 @@
165
  </button>
166
  </div>
167
  </div>
168
-
169
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
170
- <!-- Agent Card 1 -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
171
  <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-primary-500/50 transition">
172
  <div class="flex justify-between items-start mb-3">
173
  <div class="flex items-center space-x-3">
@@ -309,9 +427,12 @@
309
  <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg" alt="Instagram" class="h-10">
310
  </div>
311
  <div class="glass-panel rounded-xl p-6 flex items-center justify-center">
312
- <img src="https://n8n.io/favicon.ico" alt="n8n" class="h-10">
 
 
 
 
313
  </div>
314
- </div>
315
 
316
  <div class="text-center">
317
  <button class="px-6 py-3 border border-primary-500 text-primary-500 hover:bg-primary-500/10 rounded-lg font-medium transition inline-flex items-center space-x-2">
@@ -320,9 +441,76 @@
320
  </button>
321
  </div>
322
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
323
 
324
  <!-- Timeline Section -->
325
- <section class="mb-16 glass-panel rounded-2xl p-6">
326
  <div class="flex justify-between items-center mb-6">
327
  <h3 class="text-xl font-bold">Daily Agent Performance Report</h3>
328
  <div class="flex space-x-2">
 
13
  extend: {
14
  colors: {
15
  primary: {
16
+ 100: '#ecfdf5',
17
+ 500: '#10b981',
18
+ 900: '#064e3b'
19
  },
20
+ secondary: {
21
  100: '#f5f3ff',
22
  500: '#8b5cf6',
23
  900: '#4c1d95'
 
165
  </button>
166
  </div>
167
  </div>
168
+ <div class="grid grid-cols-1 gap-6" id="agents-dashboard">
169
+ <!-- Priority Agent -->
170
+ <div class="agent-card glass-panel rounded-xl p-6 border border-secondary-500/50 transition pulse-active">
171
+ <div class="flex justify-between items-start mb-4">
172
+ <div class="flex items-center space-x-4">
173
+ <div class="relative">
174
+ <div class="w-12 h-12 rounded-full bg-gradient-to-br from-secondary-500 to-yellow-500 flex items-center justify-center">
175
+ <i data-feather="alert-circle" class="text-dark-900"></i>
176
+ </div>
177
+ <img src="https://static.photos/technology/200x200/43" alt="Grok" class="w-5 h-5 rounded-full absolute -bottom-1 -right-1 border-2 border-dark-900">
178
+ </div>
179
+ <div>
180
+ <h4 class="font-medium">Investor Relations</h4>
181
+ <span class="text-xs text-secondary-500 flex items-center">
182
+ <span class="w-2 h-2 rounded-full bg-secondary-500 mr-1"></span>
183
+ Requires Attention
184
+ </span>
185
+ </div>
186
+ </div>
187
+ <div class="flex items-center space-x-2">
188
+ <span class="text-xs bg-secondary-500/20 text-secondary-500 px-2 py-1 rounded">High Priority</span>
189
+ <button class="text-gray-400 hover:text-secondary-500 transition">
190
+ <i data-feather="more-vertical"></i>
191
+ </button>
192
+ </div>
193
+ </div>
194
+ <p class="text-sm text-gray-300 mb-4">3 new investment opportunities need your review</p>
195
+ <div class="flex justify-between text-sm mb-4">
196
+ <div>
197
+ <span class="text-gray-400">Time Saved</span>
198
+ <p class="font-medium">2.5 hours</p>
199
+ </div>
200
+ <div>
201
+ <span class="text-gray-400">Tasks Completed</span>
202
+ <p class="font-medium">7/10</p>
203
+ </div>
204
+ </div>
205
+ <div class="h-2 bg-gray-800 rounded-full mb-2 overflow-hidden">
206
+ <div class="bg-secondary-500 h-full rounded-full w-3/4"></div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Secondary Agents Grid -->
211
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
212
+ <!-- Agent 1 -->
213
+ <div class="agent-card glass-panel rounded-xl p-4 border border-gray-700 hover:border-primary-500/30 transition">
214
+ <div class="flex justify-between items-start mb-3">
215
+ <div class="flex items-center space-x-3">
216
+ <div class="relative">
217
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-500 to-green-400 flex items-center justify-center">
218
+ <i data-feather="cpu" class="text-dark-900 text-xs"></i>
219
+ </div>
220
+ <img src="https://static.photos/technology/200x200/42" alt="Claude" class="w-3 h-3 rounded-full absolute -bottom-0.5 -right-0.5 border border-dark-900">
221
+ </div>
222
+ <div>
223
+ <h4 class="font-medium text-sm">Email Assistant</h4>
224
+ <span class="text-xs text-primary-500 flex items-center">
225
+ <span class="w-1.5 h-1.5 rounded-full bg-primary-500 mr-1"></span>
226
+ Active
227
+ </span>
228
+ </div>
229
+ </div>
230
+ <span class="text-xs bg-primary-500/10 text-primary-500 px-1.5 py-0.5 rounded">5 new</span>
231
+ </div>
232
+ <div class="h-1 bg-gray-800 rounded-full mb-1 overflow-hidden">
233
+ <div class="bg-primary-500 h-full rounded-full w-3/4"></div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Agent 2 -->
238
+ <div class="agent-card glass-panel rounded-xl p-4 border border-gray-700 hover:border-primary-500/30 transition">
239
+ <div class="flex justify-between items-start mb-3">
240
+ <div class="flex items-center space-x-3">
241
+ <div class="relative">
242
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
243
+ <i data-feather="calendar" class="text-dark-900 text-xs"></i>
244
+ </div>
245
+ <img src="https://n8n.io/favicon.ico" alt="n8n" class="w-3 h-3 rounded-full absolute -bottom-0.5 -right-0.5 border border-dark-900">
246
+ </div>
247
+ <div>
248
+ <h4 class="font-medium text-sm">Scheduler</h4>
249
+ <span class="text-xs text-purple-500 flex items-center">
250
+ <span class="w-1.5 h-1.5 rounded-full bg-purple-500 mr-1"></span>
251
+ Syncing
252
+ </span>
253
+ </div>
254
+ </div>
255
+ <span class="text-xs bg-purple-500/10 text-purple-500 px-1.5 py-0.5 rounded">2 meetings</span>
256
+ </div>
257
+ <div class="h-1 bg-gray-800 rounded-full mb-1 overflow-hidden">
258
+ <div class="bg-purple-500 h-full rounded-full w-full"></div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Agent 3 -->
263
+ <div class="agent-card glass-panel rounded-xl p-4 border border-gray-700 hover:border-primary-500/30 transition">
264
+ <div class="flex justify-between items-start mb-3">
265
+ <div class="flex items-center space-x-3">
266
+ <div class="relative">
267
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 flex items-center justify-center">
268
+ <i data-feather="trending-up" class="text-dark-900 text-xs"></i>
269
+ </div>
270
+ <img src="https://static.photos/technology/200x200/43" alt="Grok" class="w-3 h-3 rounded-full absolute -bottom-0.5 -right-0.5 border border-dark-900">
271
+ </div>
272
+ <div>
273
+ <h4 class="font-medium text-sm">Analytics</h4>
274
+ <span class="text-xs text-blue-400 flex items-center">
275
+ <span class="w-1.5 h-1.5 rounded-full bg-blue-400 mr-1"></span>
276
+ Processing
277
+ </span>
278
+ </div>
279
+ </div>
280
+ <span class="text-xs bg-blue-400/10 text-blue-400 px-1.5 py-0.5 rounded">Report</span>
281
+ </div>
282
+ <div class="h-1 bg-gray-800 rounded-full mb-1 overflow-hidden">
283
+ <div class="bg-blue-400 h-full rounded-full w-2/5"></div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <!-- Agent Card 1 -->
289
  <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-primary-500/50 transition">
290
  <div class="flex justify-between items-start mb-3">
291
  <div class="flex items-center space-x-3">
 
427
  <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg" alt="Instagram" class="h-10">
428
  </div>
429
  <div class="glass-panel rounded-xl p-6 flex items-center justify-center">
430
+ <img src="https://static.photos/technology/200x200/42" alt="Claude" class="h-10">
431
+ </div>
432
+ <div class="glass-panel rounded-xl p-6 flex items-center justify-center">
433
+ <img src="https://static.photos/technology/200x200/43" alt="Grok" class="h-10">
434
+ </div>
435
  </div>
 
436
 
437
  <div class="text-center">
438
  <button class="px-6 py-3 border border-primary-500 text-primary-500 hover:bg-primary-500/10 rounded-lg font-medium transition inline-flex items-center space-x-2">
 
441
  </button>
442
  </div>
443
  </section>
444
+ <!-- Where VAgents Come In Section -->
445
+ <section class="mb-16 glass-panel rounded-2xl p-8">
446
+ <h3 class="text-2xl font-bold mb-6 text-center">Where VAgents Come In</h3>
447
+ <div class="grid md:grid-cols-2 gap-8">
448
+ <div>
449
+ <div class="flex items-start mb-4">
450
+ <div class="bg-primary-500/20 p-2 rounded-lg mr-4">
451
+ <i data-feather="zap" class="text-primary-500"></i>
452
+ </div>
453
+ <div>
454
+ <h4 class="font-bold mb-2">Supercharged Productivity</h4>
455
+ <p class="text-gray-300">Build an app in a day with 8 experts working together, each with 50x the speed of a human. Your ideas become reality at unprecedented speed.</p>
456
+ </div>
457
+ </div>
458
+ <div class="flex items-start mb-4">
459
+ <div class="bg-primary-500/20 p-2 rounded-lg mr-4">
460
+ <i data-feather="heart" class="text-primary-500"></i>
461
+ </div>
462
+ <div>
463
+ <h4 class="font-bold mb-2">Focus on What Matters</h4>
464
+ <p class="text-gray-300">Your lifestyle becomes about ideas, meaningful conversations, and strategic decisions - not busywork. Spend less time in front of screens and more time living.</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div>
469
+ <div class="flex items-start mb-4">
470
+ <div class="bg-primary-500/20 p-2 rounded-lg mr-4">
471
+ <i data-feather="clock" class="text-primary-500"></i>
472
+ </div>
473
+ <div>
474
+ <h4 class="font-bold mb-2">Hours Saved</h4>
475
+ <p class="text-gray-300">On average, VAgents users save 31 hours per week - that's almost an entire work week reclaimed for creativity and life.</p>
476
+ </div>
477
+ </div>
478
+ <div class="flex items-start">
479
+ <div class="bg-primary-500/20 p-2 rounded-lg mr-4">
480
+ <i data-feather="smile" class="text-primary-500"></i>
481
+ </div>
482
+ <div>
483
+ <h4 class="font-bold mb-2">The Future is Exciting</h4>
484
+ <p class="text-gray-300">Imagine a world where your team of AI agents handles the mundane while you focus on vision and connection. That future starts today.</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Stats Dashboard Section -->
492
+ <section class="mb-16 glass-panel rounded-2xl p-8">
493
+ <div class="flex justify-between items-center mb-6">
494
+ <h3 class="text-2xl font-bold">Your Weekly Performance</h3>
495
+ <div class="flex space-x-2">
496
+ <button class="px-3 py-1 text-xs bg-dark-800 hover:bg-dark-700 rounded-lg transition">Week</button>
497
+ <button class="px-3 py-1 text-xs bg-dark-800 hover:bg-dark-700 rounded-lg transition">Month</button>
498
+ <button class="px-3 py-1 text-xs bg-dark-800 hover:bg-dark-700 rounded-lg transition">Year</button>
499
+ </div>
500
+ </div>
501
+ <div class="bg-dark-800 rounded-xl p-4 mb-6">
502
+ <img src="https://static.photos/technology/1024x576/44" alt="Stats Dashboard" class="w-full rounded-lg">
503
+ </div>
504
+ <div class="text-center">
505
+ <p class="text-gray-400 mb-4">See exactly how much time each agent saves you daily</p>
506
+ <button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
507
+ View Full Dashboard
508
+ </button>
509
+ </div>
510
+ </section>
511
 
512
  <!-- Timeline Section -->
513
+ <section class="mb-16 glass-panel rounded-2xl p-6">
514
  <div class="flex justify-between items-center mb-6">
515
  <h3 class="text-xl font-bold">Daily Agent Performance Report</h3>
516
  <div class="flex space-x-2">