Spaces:

yourgui
/

undefined

Running

App Files Files Community

yourgui commited on Oct 17, 2025

Commit

ffe653b

verified ·

1 Parent(s): 8f1ce1a

create the user flow now - get started, it's free. - and then have VAI ask "what do you want to automate?" and below a script to paste in chatgpt to ask "make a recap of all my tasks" - ideally if you have a project folder with all your relevant chats.

Browse files

Files changed (3) hide show

dashboard.html +411 -0
index.html +12 -12
onboarding.html +174 -0

dashboard.html ADDED Viewed

	@@ -0,0 +1,411 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your VAI Dashboard</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>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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);
+        }
+        .agent-card {
+            transition: all 0.3s ease;
+        }
+        .agent-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(63, 242, 140, 0.1);
+        }
+        .pulse-active {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(63, 242, 140, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0); }
+        }
+        .progress-bar {
+            background: #0ea5e9;
+        }
+        .timeline-item:not(:last-child)::after {
+            content: '';
+            position: absolute;
+            left: 8px;
+            top: 24px;
+            height: calc(100% - 24px);
+            width: 2px;
+            background: rgba(255, 255, 255, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-dark-900 text-gray-200 font-sans min-h-screen overflow-x-hidden" id="vanta-bg">
+    <!-- Vanta.js Background -->
+    <script>
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: "#3FF28C",
+            backgroundColor: "#10151B",
+            size: 0.8
+        })
+    </script>
+    <!-- Main Container -->
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-12">
+            <div class="flex items-center space-x-2">
+                <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg">
+                <h1 class="text-2xl font-bold text-primary-500">VAI</h1>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="hover:text-primary-500 transition">Dashboard</a>
+                <a href="#" class="hover:text-primary-500 transition">Agents</a>
+                <a href="#" class="hover:text-primary-500 transition">Integrations</a>
+                <a href="#" class="hover:text-primary-500 transition">Community</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition">
+                    <i data-feather="settings"></i>
+                </button>
+                <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition flex items-center space-x-2">
+                    <i data-feather="plus"></i>
+                    <span>New Agent</span>
+                </button>
+            </div>
+        </header>
+        <!-- Welcome Banner -->
+        <section class="glass-panel rounded-2xl p-6 mb-8 flex items-center justify-between">
+            <div>
+                <h2 class="text-xl font-bold mb-1">Welcome to your VAI Dashboard</h2>
+                <p class="text-gray-400">Your virtual team is ready to work. Here's what we've automated for you so far.</p>
+            </div>
+            <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center">
+                <i data-feather="help-circle" class="mr-2"></i>
+                <span>Quick Tour</span>
+            </button>
+        </section>
+        <!-- Stats Overview -->
+        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <div class="glass-panel rounded-xl p-4">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-400 mb-1">Time Saved</p>
+                        <h3 class="text-2xl font-bold">5.2 hours</h3>
+                    </div>
+                    <div class="bg-primary-500/20 p-2 rounded-lg">
+                        <i data-feather="clock" class="text-primary-500"></i>
+                    </div>
+                </div>
+                <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden">
+                    <div class="bg-primary-500 h-full rounded-full w-3/4"></div>
+                </div>
+            </div>
+            <div class="glass-panel rounded-xl p-4">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-400 mb-1">Tasks Completed</p>
+                        <h3 class="text-2xl font-bold">14/18</h3>
+                    </div>
+                    <div class="bg-green-400/20 p-2 rounded-lg">
+                        <i data-feather="check-circle" class="text-green-400"></i>
+                    </div>
+                </div>
+                <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden">
+                    <div class="bg-green-400 h-full rounded-full w-3/4"></div>
+                </div>
+            </div>
+            <div class="glass-panel rounded-xl p-4">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-400 mb-1">Active Agents</p>
+                        <h3 class="text-2xl font-bold">5</h3>
+                    </div>
+                    <div class="bg-blue-400/20 p-2 rounded-lg">
+                        <i data-feather="cpu" class="text-blue-400"></i>
+                    </div>
+                </div>
+                <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden">
+                    <div class="bg-blue-400 h-full rounded-full w-full"></div>
+                </div>
+            </div>
+            <div class="glass-panel rounded-xl p-4">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-400 mb-1">Weekly Efficiency</p>
+                        <h3 class="text-2xl font-bold">84%</h3>
+                    </div>
+                    <div class="bg-purple-500/20 p-2 rounded-lg">
+                        <i data-feather="activity" class="text-purple-500"></i>
+                    </div>
+                </div>
+                <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden">
+                    <div class="bg-purple-500 h-full rounded-full w-4/5"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Agent Grid -->
+        <section class="mb-8">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-xl font-bold">Your Agent Team</h3>
+                <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center">
+                    <i data-feather="plus" class="mr-2"></i>
+                    <span>Add Agent</span>
+                </button>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <!-- Agent Card 1 -->
+                <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-primary-500/50 transition">
+                    <div class="flex justify-between items-start mb-3">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
+                                <i data-feather="cpu" class="text-dark-900"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">VAI Orchestrator</h4>
+                                <span class="text-xs text-primary-500 flex items-center">
+                                    <span class="w-2 h-2 rounded-full bg-primary-500 mr-1"></span>
+                                    Operational
+                                </span>
+                            </div>
+                        </div>
+                        <button class="text-gray-400 hover:text-primary-500 transition">
+                            <i data-feather="more-vertical"></i>
+                        </button>
+                    </div>
+                    <p class="text-sm text-gray-300 mb-3">Coordinating 5 agents for your workflow</p>
+                    <div class="h-1.5 bg-gray-800 rounded-full mb-3 overflow-hidden">
+                        <div class="progress-bar h-full rounded-full w-3/4"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-400">
+                        <span>ETA: 2m</span>
+                        <span>75% complete</span>
+                    </div>
+                </div>
+                <!-- Agent Card 2 -->
+                <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-secondary-500/50 transition pulse-active">
+                    <div class="flex justify-between items-start mb-3">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-secondary-500 to-yellow-500 flex items-center justify-center">
+                                <i data-feather="alert-circle" class="text-dark-900"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">Investor Bot</h4>
+                                <span class="text-xs text-secondary-500 flex items-center">
+                                    <span class="w-2 h-2 rounded-full bg-secondary-500 mr-1"></span>
+                                    Priority
+                                </span>
+                            </div>
+                        </div>
+                        <button class="text-gray-400 hover:text-secondary-500 transition">
+                            <i data-feather="more-vertical"></i>
+                        </button>
+                    </div>
+                    <p class="text-sm text-gray-300 mb-3">New investment opportunity requires your attention</p>
+                    <div class="h-1.5 bg-gray-800 rounded-full mb-3 overflow-hidden">
+                        <div class="bg-secondary-500 h-full rounded-full w-1/2"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-400">
+                        <span>Waiting for input</span>
+                        <span>50% complete</span>
+                    </div>
+                </div>
+                <!-- Agent Card 3 -->
+                <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-green-400/50 transition">
+                    <div class="flex justify-between items-start mb-3">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-teal-400 flex items-center justify-center">
+                                <i data-feather="mail" class="text-dark-900"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">Email Assistant</h4>
+                                <span class="text-xs text-success-500 flex items-center">
+                                    <span class="w-2 h-2 rounded-full bg-success-500 mr-1"></span>
+                                    Completed
+                                </span>
+                            </div>
+                        </div>
+                        <button class="text-gray-400 hover:text-green-400 transition">
+                            <i data-feather="more-vertical"></i>
+                        </button>
+                    </div>
+                    <p class="text-sm text-gray-300 mb-3">Processed 12 important emails this morning</p>
+                    <div class="h-1.5 bg-gray-800 rounded-full mb-3 overflow-hidden">
+                        <div class="bg-green-400 h-full rounded-full w-full"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-400">
+                        <span>Task complete</span>
+                        <span>100% complete</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Recent Activity -->
+        <section class="mb-8 glass-panel rounded-2xl p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-xl font-bold">Recent Activity</h3>
+                <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition">
+                    <i data-feather="filter" class="mr-2"></i>
+                    <span>Filter</span>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <!-- Activity Item 1 -->
+                <div class="timeline-item relative pl-6">
+                    <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-primary-500 border-2 border-dark-900"></div>
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h4 class="font-medium">Email Assistant completed task</h4>
+                            <p class="text-sm text-gray-300">Processed and categorized 12 new emails</p>
+                            <div class="flex text-xs mt-1 space-x-4">
+                                <span class="text-primary-500">⏱️ 1.5h saved</span>
+                                <span>🔄 5min interaction</span>
+                            </div>
+                        </div>
+                        <span class="text-xs text-gray-500">15 min ago</span>
+                    </div>
+                </div>
+                <!-- Activity Item 2 -->
+                <div class="timeline-item relative pl-6">
+                    <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-400 border-2 border-dark-900"></div>
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h4 class="font-medium">Calendar Sync added event</h4>
+                            <p class="text-sm text-gray-300">Scheduled "Quarterly Review" for Friday 2pm</p>
+                            <div class="flex text-xs mt-1 space-x-4">
+                                <span class="text-blue-400">⏱️ 30min saved</span>
+                                <span>🔄 2min interaction</span>
+                            </div>
+                        </div>
+                        <span class="text-xs text-gray-500">1 hour ago</span>
+                    </div>
+                </div>
+                <!-- Activity Item 3 -->
+                <div class="timeline-item relative pl-6">
+                    <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-secondary-500 border-2 border-dark-900"></div>
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h4 class="font-medium">Investor Bot found opportunity</h4>
+                            <p class="text-sm text-gray-300">Potential investment in AI healthcare startup</p>
+                            <div class="flex text-xs mt-1 space-x-4">
+                                <span class="text-secondary-500">⏱️ 3h saved</span>
+                                <span>🔄 15min interaction</span>
+                            </div>
+                        </div>
+                        <span class="text-xs text-gray-500">3 hours ago</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Quick Actions -->
+        <section class="glass-panel rounded-2xl p-6">
+            <h3 class="text-xl font-bold mb-6">Quick Actions</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <button class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg transition text-left">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-primary-500/10 flex items-center justify-center mr-3">
+                            <i data-feather="zap" class="text-primary-500"></i>
+                        </div>
+                        <h4 class="font-medium">Create New Agent</h4>
+                    </div>
+                    <p class="text-sm text-gray-400">Add a specialized AI to your team</p>
+                </button>
+                <button class="p-4 border border-gray-700 hover:border-blue-400 rounded-lg transition text-left">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-blue-400/10 flex items-center justify-center mr-3">
+                            <i data-feather="link" class="text-blue-400"></i>
+                        </div>
+                        <h4 class="font-medium">Connect Tool</h4>
+                    </div>
+                    <p class="text-sm text-gray-400">Add a new integration to your workflow</p>
+                </button>
+                <button class="p-4 border border-gray-700 hover:border-purple-500 rounded-lg transition text-left">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center mr-3">
+                            <i data-feather="bar-chart-2" class="text-purple-500"></i>
+                        </div>
+                        <h4 class="font-medium">View Analytics</h4>
+                    </div>
+                    <p class="text-sm text-gray-400">See detailed performance metrics</p>
+                </button>
+            </div>
+        </section>
+    </div>
+    <script>
+        feather.replace();
+        // Simulate agent activity
+        function simulateAgentActivity() {
+            const agents = document.querySelectorAll('.agent-card');
+            agents.forEach(agent => {
+                const progressBar = agent.querySelector('.h-1.5 > div');
+                const progressText = agent.querySelector('.text-xs:last-child span:last-child');
+                const status = agent.querySelector('.text-xs:first-child span:first-child');
+                if (!progressBar || !progressText || !status) return;
+                const currentWidth = parseInt(progressBar.style.width || '0');
+                const newWidth = Math.min(100, currentWidth + Math.floor(Math.random() * 15) + 5);
+                progressBar.style.width = `${newWidth}%`;
+                progressText.textContent = `${newWidth}% complete`;
+                if (newWidth >= 100) {
+                    status.className = 'w-2 h-2 rounded-full bg-green-400 mr-1';
+                    status.parentElement.className = 'text-xs text-green-400 flex items-center';
+                    status.parentElement.querySelector('span:last-child').textContent = 'Complete';
+                } else if (newWidth >= 75) {
+                    status.className = 'w-2 h-2 rounded-full bg-primary-500 mr-1';
+                    status.parentElement.className = 'text-xs text-primary-500 flex items-center';
+                    status.parentElement.querySelector('span:last-child').textContent = 'Active';
+                }
+            });
+            setTimeout(simulateAgentActivity, 3000);
+        }
+        // Start simulation after page load
+        window.addEventListener('load', () => {
+            setTimeout(simulateAgentActivity, 1000);
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -120,11 +120,11 @@ secondary: {
                 <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition">
                     <i data-feather="settings"></i>
                 </button>
-                <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition flex items-center space-x-2">
-                    <i data-feather="plus"></i>
-                    <span>New Agent</span>
                 </button>
-            </div>
         </header>
         <!-- Hero Section -->
@@ -138,10 +138,10 @@ secondary: {
                     Manage multiple AI agents simultaneously with VAI as your personal orchestrator. Stay in your genius zone while your virtual team works in perfect sync.
                 </p>
                 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                    <button class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
                         Get Started - It's Free
                     </button>
-                    <button class="px-6 py-3 border border-primary-500 text-primary-500 hover:bg-primary-500/10 rounded-lg font-medium transition flex items-center space-x-2">
                         <i data-feather="play-circle"></i>
                         <span>Watch Demo</span>
                     </button>
@@ -594,10 +594,10 @@ secondary: {
         <section class="glass-panel rounded-2xl p-8 mb-16 text-center">
             <h3 class="text-2xl font-bold mb-4">Ready to Transform Your Workflow?</h3>
             <p class="text-gray-300 mb-6 max-w-2xl mx-auto">Join thousands of professionals who are already managing their AI teams with VAgents. Start your free trial today.</p>
-            <button class="px-8 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-dark-900 rounded-lg font-bold transition">
-                Get Started - Free Forever
-            </button>
-        </section>
         <!-- Footer -->
         <footer class="border-t border-gray-800 pt-8 pb-12">
@@ -609,8 +609,8 @@ secondary: {
                 <div>
                     <h4 class="text-lg font-bold mb-4">Product</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Features</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Pricing</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Integrations</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Roadmap</a></li>
                     </ul>

                 <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition">
                     <i data-feather="settings"></i>
                 </button>
+                <button onclick="window.location.href='onboarding.html'" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition flex items-center space-x-2">
+                    <i data-feather="user"></i>
+                    <span>Get Started</span>
                 </button>
+</div>
         </header>
         <!-- Hero Section -->
                     Manage multiple AI agents simultaneously with VAI as your personal orchestrator. Stay in your genius zone while your virtual team works in perfect sync.
                 </p>
                 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button onclick="window.location.href='onboarding.html'" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
                         Get Started - It's Free
                     </button>
+<button class="px-6 py-3 border border-primary-500 text-primary-500 hover:bg-primary-500/10 rounded-lg font-medium transition flex items-center space-x-2">
                         <i data-feather="play-circle"></i>
                         <span>Watch Demo</span>
                     </button>
         <section class="glass-panel rounded-2xl p-8 mb-16 text-center">
             <h3 class="text-2xl font-bold mb-4">Ready to Transform Your Workflow?</h3>
             <p class="text-gray-300 mb-6 max-w-2xl mx-auto">Join thousands of professionals who are already managing their AI teams with VAgents. Start your free trial today.</p>
+                <button onclick="window.location.href='onboarding.html'" class="px-8 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-dark-900 rounded-lg font-bold transition">
+                    Get Started - Free Forever
+                </button>
+</section>
         <!-- Footer -->
         <footer class="border-t border-gray-800 pt-8 pb-12">
                 <div>
                     <h4 class="text-lg font-bold mb-4">Product</h4>
                     <ul class="space-y-2">
+                    <li><a href="onboarding.html" class="text-gray-400 hover:text-primary-500 transition text-sm">Get Started</a></li>
+<li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Pricing</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Integrations</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-primary-500 transition text-sm">Roadmap</a></li>
                     </ul>

onboarding.html ADDED Viewed

	@@ -0,0 +1,174 @@

+<!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='dashboard.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>