onboarding.html

<!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">
        <!-- Progress Steps -->
        <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>

        <!-- Main Card -->
        <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>
            
            <!-- Automation Options -->
            <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>

            <!-- Custom Prompt -->
            <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>

            <!-- ChatGPT Script -->
            <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>

            <!-- Navigation Buttons -->
            <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);
            
            // Show copied notification
            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>