🐳 28/03 - 06:27 - Can you change the video to a screen recording of different tasks happening in a dashboard by ai agents in a businness format like github.com/paperclipai/paperclip

index.html

@@ -414,68 +414,123 @@
     </section>
 
     <!-- Video Demo Section -->
-    <section id="video" class="py-24 bg-white">
+    <section id="video" class="py-24 bg-slate-900">
         <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-12">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">See FlowSync in Action</h2>
-                <p class="text-slate-600 text-lg max-w-2xl mx-auto">Watch how teams automate complex workflows and save 10+ hours every week</p>
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">AI Agents at Work</h2>
+                <p class="text-slate-400 text-lg max-w-2xl mx-auto">Watch AI agents autonomously handle tasks across your business dashboard—processing emails, updating CRMs, and coordinating with your team in real-time.</p>
             </div>
 
-            <div class="video-container shadow-2xl aspect-video relative group">
-                <!-- Video Player -->
-                <video id="demo-video" class="w-full h-full object-cover" poster="http://static.photos/technology/1200x630/42">
-                    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
+            <div class="video-container shadow-2xl aspect-video relative group bg-slate-800 rounded-2xl overflow-hidden border border-slate-700">
+                <!-- Dashboard Screen Recording Mock -->
+                <div id="dashboard-demo" class="w-full h-full bg-slate-900 relative overflow-hidden">
+                    <!-- Dashboard Header -->
+                    <div class="absolute top-0 left-0 right-0 h-14 bg-slate-800 border-b border-slate-700 flex items-center px-6 z-20">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-8 h-8 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-lg flex items-center justify-center">
+                                <i data-lucide="bot" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-white font-semibold">FlowSync AI Dashboard</span>
+                        </div>
+                        <div class="ml-auto flex items-center space-x-4">
+                            <div class="flex items-center space-x-2 px-3 py-1.5 bg-emerald-500/20 rounded-full border border-emerald-500/30">
+                                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
+                                <span class="text-emerald-400 text-xs font-medium">4 Agents Active</span>
+                            </div>
+                            <div class="w-8 h-8 rounded-full bg-slate-700"></div>
+                        </div>
+                    </div>
+                    
+                    <!-- Dashboard Content -->
+                    <div class="absolute top-14 left-0 right-0 bottom-0 flex">
+                        <!-- Sidebar -->
+                        <div class="w-64 bg-slate-800/50 border-r border-slate-700 p-4 hidden md:block">
+                            <div class="space-y-2">
+                                <div class="flex items-center space-x-3 px-3 py-2 bg-sky-500/20 rounded-lg border border-sky-500/30">
+                                    <i data-lucide="layout-dashboard" class="w-4 h-4 text-sky-400"></i>
+                                    <span class="text-sky-400 text-sm font-medium">Active Tasks</span>
+                                </div>
+                                <div class="flex items-center space-x-3 px-3 py-2 text-slate-400 hover:text-white cursor-pointer">
+                                    <i data-lucide="users" class="w-4 h-4"></i>
+                                    <span class="text-sm">Team</span>
+                                </div>
+                                <div class="flex items-center space-x-3 px-3 py-2 text-slate-400 hover:text-white cursor-pointer">
+                                    <i data-lucide="git-branch" class="w-4 h-4"></i>
+                                    <span class="text-sm">Workflows</span>
+                                </div>
+                                <div class="flex items-center space-x-3 px-3 py-2 text-slate-400 hover:text-white cursor-pointer">
+                                    <i data-lucide="bar-chart-3" class="w-4 h-4"></i>
+                                    <span class="text-sm">Analytics</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Main Content Area -->
+                        <div class="flex-1 p-6 overflow-hidden">
+                            <!-- Task Feed -->
+                            <div class="max-w-3xl mx-auto space-y-3" id="agent-task-feed">
+                                <!-- Tasks will be animated here -->
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- AI Agent Activity Overlay -->
+                    <div class="absolute bottom-4 right-4 bg-slate-800/90 backdrop-blur border border-slate-700 rounded-xl p-4 shadow-2xl max-w-xs z-30">
+                        <div class="flex items-center space-x-3 mb-3">
+                            <div class="w-2 h-2 rounded-full bg-violet-400 animate-pulse"></div>
+                            <span class="text-white text-sm font-medium">AI Agent Activity</span>
+                        </div>
+                        <div id="agent-status-text" class="text-slate-400 text-xs leading-relaxed">
+                            Monitoring incoming tasks...
+                        </div>
+                    </div>
+                </div>
                 
-                <!-- Custom Controls -->
-                <div id="video-overlay" class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/30 transition-all cursor-pointer" onclick="toggleVideo()">
-                    <div class="play-button">
-                        <i data-lucide="play" class="w-8 h-8 text-sky-600 ml-1"></i>
+                <!-- Play Overlay (shown when paused) -->
+                <div id="video-overlay" class="absolute inset-0 bg-black/60 flex items-center justify-center cursor-pointer z-40" onclick="toggleDashboardDemo()">
+                    <div class="play-button bg-white/95 hover:bg-white hover:scale-110 transition-all">
+                        <i data-lucide="play" class="w-8 h-8 text-slate-900 ml-1"></i>
                     </div>
                 </div>
 
-                <!-- Video Controls Bar -->
-                <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                <!-- Dashboard Controls -->
+                <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/90 to-transparent z-30">
                     <div class="flex items-center space-x-4 text-white">
-                        <button onclick="toggleVideo()" class="hover:text-sky-400 transition-colors">
-                            <i data-lucide="play" id="play-icon" class="w-6 h-6"></i>
+                        <button onclick="toggleDashboardDemo()" class="hover:text-sky-400 transition-colors">
+                            <i data-lucide="play" id="dashboard-play-icon" class="w-6 h-6"></i>
                         </button>
-                        <div class="flex-1 h-1 bg-white/30 rounded-full overflow-hidden cursor-pointer" onclick="seekVideo(event)">
-                            <div id="progress-bar" class="h-full bg-sky-500 w-0 transition-all"></div>
+                        <div class="flex-1 h-1 bg-white/20 rounded-full overflow-hidden cursor-pointer" onclick="seekDashboardDemo(event)">
+                            <div id="dashboard-progress" class="h-full bg-violet-500 w-0 transition-all duration-300"></div>
                         </div>
-                        <span id="time-display" class="text-sm font-medium">0:00 / 0:00</span>
-                        <button onclick="toggleMute()" class="hover:text-sky-400 transition-colors">
-                            <i data-lucide="volume-2" id="volume-icon" class="w-5 h-5"></i>
-                        </button>
-                        <button onclick="fullscreen()" class="hover:text-sky-400 transition-colors">
-                            <i data-lucide="maximize" class="w-5 h-5"></i>
+                        <span id="dashboard-time" class="text-sm font-medium text-slate-300">0:00 / 0:45</span>
+                        <button onclick="toggleDashboardMute()" class="hover:text-sky-400 transition-colors">
+                            <i data-lucide="volume-2" id="dashboard-volume-icon" class="w-5 h-5"></i>
                         </button>
                     </div>
                 </div>
             </div>
 
             <div class="grid md:grid-cols-3 gap-6 mt-12">
-                <div class="neo-card p-6 text-center">
-                    <div class="w-12 h-12 bg-sky-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-                        <i data-lucide="clock" class="w-6 h-6 text-sky-600"></i>
+                <div class="bg-slate-800/50 border border-slate-700 p-6 rounded-2xl text-center hover:border-sky-500/50 transition-colors">
+                    <div class="w-12 h-12 bg-sky-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="bot" class="w-6 h-6 text-sky-400"></i>
                     </div>
-                    <h3 class="font-semibold text-lg mb-2">Save 10+ Hours/Week</h3>
-                    <p class="text-slate-600 text-sm">Automate repetitive tasks and focus on what matters</p>
+                    <h3 class="font-semibold text-lg mb-2 text-white">AI Agents Work 24/7</h3>
+                    <p class="text-slate-400 text-sm">Autonomous agents handle tasks round-the-clock without supervision</p>
                 </div>
-                <div class="neo-card p-6 text-center">
-                    <div class="w-12 h-12 bg-violet-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-                        <i data-lucide="zap" class="w-6 h-6 text-violet-600"></i>
+                <div class="bg-slate-800/50 border border-slate-700 p-6 rounded-2xl text-center hover:border-violet-500/50 transition-colors">
+                    <div class="w-12 h-12 bg-violet-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="workflow" class="w-6 h-6 text-violet-400"></i>
                     </div>
-                    <h3 class="font-semibold text-lg mb-2">10x Faster Execution</h3>
-                    <p class="text-slate-600 text-sm">Processes that took hours now complete in seconds</p>
+                    <h3 class="font-semibold text-lg mb-2 text-white">Multi-Step Reasoning</h3>
+                    <p class="text-slate-400 text-sm">Agents break down complex tasks and execute across multiple tools</p>
                 </div>
-                <div class="neo-card p-6 text-center">
-                    <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-                        <i data-lucide="shield-check" class="w-6 h-6 text-emerald-600"></i>
+                <div class="bg-slate-800/50 border border-slate-700 p-6 rounded-2xl text-center hover:border-emerald-500/50 transition-colors">
+                    <div class="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="shield-check" class="w-6 h-6 text-emerald-400"></i>
                     </div>
-                    <h3 class="font-semibold text-lg mb-2">99.9% Uptime</h3>
-                    <p class="text-slate-600 text-sm">Enterprise-grade reliability for mission-critical workflows</p>
+                    <h3 class="font-semibold text-lg mb-2 text-white">Human-in-the-Loop</h3>
+                    <p class="text-slate-400 text-sm">Smart escalation to humans when critical decisions are needed</p>
                 </div>
             </div>
         </div>
@@ -753,68 +808,171 @@
             return new Promise(resolve => setTimeout(resolve, ms));
         }
 
-        // Video Player Logic
-        const video = document.getElementById('demo-video');
-        const overlay = document.getElementById('video-overlay');
-        const playIcon = document.getElementById('play-icon');
-        const progressBar = document.getElementById('progress-bar');
-        const timeDisplay = document.getElementById('time-display');
+        // AI Dashboard Demo Logic
+        let demoRunning = false;
+        let demoInterval;
+        let currentTask = 0;
+        const totalDemoTime = 45000; // 45 seconds
+        
+        const agentTasks = [
+            { agent: 'Email Agent', action: 'Received new inquiry from client@acme.com', icon: 'mail', color: 'sky', time: 0 },
+            { agent: 'Classifier AI', action: 'Categorized as "High-Priority Lead"', icon: 'sparkles', color: 'violet', time: 2000 },
+            { agent: 'CRM Agent', action: 'Created lead in Salesforce with extracted details', icon: 'database', color: 'blue', time: 4000 },
+            { agent: 'Slack Agent', action: 'Notified sales team in #new-leads channel', icon: 'message-square', color: 'emerald', time: 6000 },
+            { agent: 'Calendar Agent', action: 'Checked availability and scheduled follow-up', icon: 'calendar', color: 'orange', time: 8000 },
+            { agent: 'Email Agent', action: 'Sent personalized response to client', icon: 'send', color: 'sky', time: 10000 },
+            { agent: 'Analytics Agent', action: 'Updated conversion tracking dashboard', icon: 'bar-chart-2', color: 'fuchsia', time: 12000 },
+            { agent: 'Email Agent', action: 'Received support ticket #2847', icon: 'ticket', color: 'sky', time: 15000 },
+            { agent: 'Classifier AI', action: 'Identified as "Technical Issue - Escalate"', icon: 'alert-triangle', color: 'violet', time: 17000 },
+            { agent: 'Support Agent', action: 'Assigned to senior engineer Sarah Chen', icon: 'user-check', color: 'rose', time: 19000 },
+            { agent: 'GitHub Agent', action: 'Created issue with logs and reproduction steps', icon: 'github', color: 'slate', time: 21000 },
+            { agent: 'Slack Agent', action: 'Alerted engineering team with priority flag', icon: 'bell', color: 'emerald', time: 23000 },
+            { agent: 'Docs Agent', action: 'Searched knowledge base for similar issues', icon: 'search', color: 'amber', time: 25000 },
+            { agent: 'Email Agent', action: 'Sent acknowledgment to customer with ETA', icon: 'clock', color: 'sky', time: 27000 },
+            { agent: 'Invoice Agent', action: 'Processed monthly subscription renewals (47)', icon: 'credit-card', color: 'cyan', time: 30000 },
+            { agent: 'Finance AI', action: 'Flagged 3 accounts for payment retry', icon: 'alert-circle', color: 'yellow', time: 32000 },
+            { agent: 'Stripe Agent', action: 'Updated payment methods for expired cards', icon: 'refresh-cw', color: 'indigo', time: 34000 },
+            { agent: 'Slack Agent', action: 'Reported revenue metrics to #finance', icon: 'trending-up', color: 'emerald', time: 36000 },
+            { agent: 'Sync Agent', action: 'Reconciled data across 12 connected platforms', icon: 'sync', color: 'teal', time: 38000 },
+            { agent: 'Maintenance', action: 'Optimizing workflows... Demo complete', icon: 'check-circle', color: 'emerald', time: 42000 }
+        ];
 
-        function toggleVideo() {
-            if (video.paused) {
-                video.play();
-                overlay.classList.add('hidden');
-                playIcon.setAttribute('data-lucide', 'pause');
+        function toggleDashboardDemo() {
+            if (demoRunning) {
+                pauseDashboardDemo();
             } else {
-                video.pause();
-                overlay.classList.remove('hidden');
-                playIcon.setAttribute('data-lucide', 'play');
+                playDashboardDemo();
             }
+        }
+
+        function playDashboardDemo() {
+            demoRunning = true;
+            document.getElementById('video-overlay').classList.add('hidden');
+            document.getElementById('dashboard-play-icon').setAttribute('data-lucide', 'pause');
+            lucide.createIcons();
+            
+            const startTime = Date.now();
+            
+            demoInterval = setInterval(() => {
+                const elapsed = Date.now() - startTime;
+                const progress = Math.min((elapsed / totalDemoTime) * 100, 100);
+                document.getElementById('dashboard-progress').style.width = `${progress}%`;
+                
+                // Update time display
+                const currentSecs = Math.floor(elapsed / 1000);
+                const totalSecs = Math.floor(totalDemoTime / 1000);
+                document.getElementById('dashboard-time').textContent = 
+                    `${Math.floor(currentSecs/60)}:${(currentSecs%60).toString().padStart(2,'0')} / ${Math.floor(totalSecs/60)}:${(totalSecs%60).toString().padStart(2,'0')}`;
+                
+                // Check for tasks to show
+                agentTasks.forEach((task, index) => {
+                    if (elapsed >= task.time && !task.shown) {
+                        task.shown = true;
+                        showAgentTask(task, index);
+                        updateAgentStatus(task);
+                    }
+                });
+                
+                if (elapsed >= totalDemoTime) {
+                    pauseDashboardDemo();
+                    // Reset for replay
+                    setTimeout(() => {
+                        agentTasks.forEach(t => t.shown = false);
+                        document.getElementById('agent-task-feed').innerHTML = '';
+                        currentTask = 0;
+                    }, 2000);
+                }
+            }, 100);
+        }
+
+        function pauseDashboardDemo() {
+            demoRunning = false;
+            clearInterval(demoInterval);
+            document.getElementById('video-overlay').classList.remove('hidden');
+            document.getElementById('dashboard-play-icon').setAttribute('data-lucide', 'play');
             lucide.createIcons();
         }
 
-        function toggleMute() {
-            video.muted = !video.muted;
-            const icon = document.getElementById('volume-icon');
-            if (video.muted) {
-                icon.setAttribute('data-lucide', 'volume-x');
-            } else {
-                icon.setAttribute('data-lucide', 'volume-2');
+        function showAgentTask(task, index) {
+            const feed = document.getElementById('agent-task-feed');
+            const taskEl = document.createElement('div');
+            
+            const colorMap = {
+                sky: 'bg-sky-500/20 border-sky-500/30 text-sky-400',
+                violet: 'bg-violet-500/20 border-violet-500/30 text-violet-400',
+                blue: 'bg-blue-500/20 border-blue-500/30 text-blue-400',
+                emerald: 'bg-emerald-500/20 border-emerald-500/30 text-emerald-400',
+                orange: 'bg-orange-500/20 border-orange-500/30 text-orange-400',
+                fuchsia: 'bg-fuchsia-500/20 border-fuchsia-500/30 text-fuchsia-400',
+                rose: 'bg-rose-500/20 border-rose-500/30 text-rose-400',
+                slate: 'bg-slate-500/20 border-slate-500/30 text-slate-400',
+                amber: 'bg-amber-500/20 border-amber-500/30 text-amber-400',
+                cyan: 'bg-cyan-500/20 border-cyan-500/30 text-cyan-400',
+                yellow: 'bg-yellow-500/20 border-yellow-500/30 text-yellow-400',
+                indigo: 'bg-indigo-500/20 border-indigo-500/30 text-indigo-400',
+                teal: 'bg-teal-500/20 border-teal-500/30 text-teal-400'
+            };
+            
+            const colorClass = colorMap[task.color] || colorMap.sky;
+            
+            taskEl.className = `flex items-center space-x-4 p-4 rounded-xl border ${colorClass} transform translate-y-4 opacity-0 transition-all duration-500 animate-slide-up`;
+            taskEl.innerHTML = `
+                <div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0">
+                    <i data-lucide="${task.icon}" class="w-5 h-5"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-center space-x-2 mb-1">
+                        <span class="font-semibold text-sm">${task.agent}</span>
+                        <span class="text-xs opacity-60">• Just now</span>
+                    </div>
+                    <p class="text-sm opacity-90 truncate">${task.action}</p>
+                </div>
+                <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>
+            `;
+            
+            feed.insertBefore(taskEl, feed.firstChild);
+            
+            // Animate in
+            setTimeout(() => {
+                taskEl.classList.remove('translate-y-4', 'opacity-0');
+            }, 50);
+            
+            // Keep only last 5 tasks visible
+            while (feed.children.length > 5) {
+                feed.removeChild(feed.lastChild);
             }
+            
             lucide.createIcons();
         }
 
-        function fullscreen() {
-            if (video.requestFullscreen) {
-                video.requestFullscreen();
+        function updateAgentStatus(task) {
+            const statusText = document.getElementById('agent-status-text');
+            statusText.textContent = `${task.agent} is ${task.action.toLowerCase()}...`;
+            
+            // Flash the activity indicator
+            const indicator = document.querySelector('.bg-violet-400');
+            if (indicator) {
+                indicator.classList.remove('animate-pulse');
+                void indicator.offsetWidth; // Trigger reflow
+                indicator.classList.add('animate-pulse');
             }
         }
 
-        function seekVideo(e) {
+        function seekDashboardDemo(e) {
+            // Visual feedback only - in real implementation would seek to position
             const rect = e.currentTarget.getBoundingClientRect();
             const pos = (e.clientX - rect.left) / rect.width;
-            video.currentTime = pos * video.duration;
+            document.getElementById('dashboard-progress').style.width = `${pos * 100}%`;
         }
 
-        video.addEventListener('timeupdate', () => {
-            const progress = (video.currentTime / video.duration) * 100;
-            progressBar.style.width = `${progress}%`;
-            
-            const current = formatTime(video.currentTime);
-            const total = formatTime(video.duration || 0);
-            timeDisplay.textContent = `${current} / ${total}`;
-        });
-
-        video.addEventListener('ended', () => {
-            overlay.classList.remove('hidden');
-            playIcon.setAttribute('data-lucide', 'play');
+        function toggleDashboardMute() {
+            const icon = document.getElementById('dashboard-volume-icon');
+            if (icon.getAttribute('data-lucide') === 'volume-2') {
+                icon.setAttribute('data-lucide', 'volume-x');
+            } else {
+                icon.setAttribute('data-lucide', 'volume-2');
+            }
             lucide.createIcons();
-        });
-
-        function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            return `${mins}:${secs.toString().padStart(2, '0')}`;
         }
 
         // Feature Tabs