| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Get Started with VAI</title> |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| .glass-panel { |
| backdrop-filter: blur(16px); |
| background: rgba(16, 21, 27, 0.7); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| } |
| |
| .progress-step { |
| width: 2rem; |
| height: 2rem; |
| border: 2px solid #3FF28C; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #3FF28C; |
| font-weight: bold; |
| } |
| |
| .progress-step.completed { |
| background-color: #3FF28C; |
| color: #10151B; |
| } |
| |
| .progress-step.active { |
| background-color: rgba(63, 242, 140, 0.2); |
| } |
| |
| .progress-connector { |
| height: 2px; |
| background-color: rgba(255, 255, 255, 0.1); |
| flex-grow: 1; |
| margin: 0 0.5rem; |
| } |
| |
| .progress-connector.completed { |
| background-color: #3FF28C; |
| } |
| </style> |
| </head> |
| <body class="bg-dark-900 text-gray-200 font-sans min-h-screen flex items-center justify-center"> |
| <div class="container mx-auto px-4 max-w-3xl"> |
| |
| <div class="flex items-center justify-between mb-12"> |
| <div class="flex items-center"> |
| <div class="progress-step completed">1</div> |
| <div class="progress-connector completed"></div> |
| <div class="progress-step active">2</div> |
| <div class="progress-connector"></div> |
| <div class="progress-step">3</div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-panel rounded-2xl p-8"> |
| <h2 class="text-3xl font-bold mb-6 text-center">What would you like to automate?</h2> |
| <p class="text-gray-400 mb-8 text-center">VAI can handle repetitive tasks, manage communications, analyze data, and more. Let's start with something simple.</p> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> |
| <div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-primary-500/20 flex items-center justify-center mr-3"> |
| <i data-feather="mail" class="text-primary-500"></i> |
| </div> |
| <h3 class="font-medium">Email Management</h3> |
| </div> |
| <p class="text-sm text-gray-400">Sort, prioritize, and respond to emails automatically</p> |
| </div> |
| <div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-3"> |
| <i data-feather="calendar" class="text-purple-500"></i> |
| </div> |
| <h3 class="font-medium">Meeting Scheduling</h3> |
| </div> |
| <p class="text-sm text-gray-400">Coordinate calendars and schedule meetings</p> |
| </div> |
| <div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-blue-400/20 flex items-center justify-center mr-3"> |
| <i data-feather="trending-up" class="text-blue-400"></i> |
| </div> |
| <h3 class="font-medium">Data Analysis</h3> |
| </div> |
| <p class="text-sm text-gray-400">Process and visualize your data automatically</p> |
| </div> |
| <div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3"> |
| <i data-feather="clipboard" class="text-yellow-500"></i> |
| </div> |
| <h3 class="font-medium">Task Management</h3> |
| </div> |
| <p class="text-sm text-gray-400">Organize and prioritize your to-do list</p> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-medium mb-2">Or describe what you'd like to automate:</label> |
| <textarea class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-1 focus:ring-primary-500" rows="3" placeholder="e.g. Summarize all my meeting notes and extract action items"></textarea> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <div class="flex justify-between items-center mb-2"> |
| <label class="block text-sm font-medium">Quick Start: Try this in ChatGPT</label> |
| <button class="text-xs bg-primary-500/10 text-primary-500 px-2 py-1 rounded" onclick="copyScript()"> |
| <i data-feather="copy" class="w-3 h-3 mr-1 inline"></i> Copy |
| </button> |
| </div> |
| <div class="bg-dark-800 p-4 rounded-lg border border-gray-700"> |
| <code class="text-sm text-gray-300"> |
| "I have a project folder with multiple chat transcripts. Please analyze all conversations and provide: |
| <br>1. Key discussion points summarized |
| <br>2. Action items with owners |
| <br>3. Important decisions made |
| <br>4. Next steps with deadlines" |
| </code> |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-between"> |
| <button class="px-6 py-2 border border-gray-600 text-gray-300 hover:bg-gray-800 rounded-lg transition" onclick="window.location.href='index.html'"> |
| Skip for now |
| </button> |
| <button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 font-medium rounded-lg transition flex items-center" onclick="window.location.href='agents.html'"> |
| Continue to Dashboard |
| <i data-feather="arrow-right" class="ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| function copyScript() { |
| const script = `"I have a project folder with multiple chat transcripts. Please analyze all conversations and provide: |
| 1. Key discussion points summarized |
| 2. Action items with owners |
| 3. Important decisions made |
| 4. Next steps with deadlines"`; |
| |
| navigator.clipboard.writeText(script); |
| |
| |
| const btn = event.target.closest('button'); |
| if (btn) { |
| const originalHtml = btn.innerHTML; |
| btn.innerHTML = '<i data-feather="check" class="w-3 h-3 mr-1 inline"></i> Copied'; |
| feather.replace(); |
| setTimeout(() => { |
| btn.innerHTML = originalHtml; |
| feather.replace(); |
| }, 2000); |
| } |
| } |
| </script> |
| </body> |
| </html> |
