VibeCodingStudio/deepsite-project-ioalg
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>VibeCodingLabs - Intelligent Workflow Automation</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/lucide@latest"></script>9 <link rel="preconnect" href="https://fonts.googleapis.com">10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>11 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">12 13 <script>14 tailwind.config = {15 theme: {16 extend: {17 fontFamily: {18 sans: ['Inter', 'sans-serif'],19 },20 colors: {21 brand: {22 50: '#f0f9ff',23 100: '#e0f2fe',24 200: '#bae6fd',25 300: '#7dd3fc',26 400: '#38bdf8',27 500: '#0ea5e9',28 600: '#0284c7',29 700: '#0369a1',30 800: '#075985',31 900: '#0c4a6e',32 }33 },34 animation: {35 'float': 'float 6s ease-in-out infinite',36 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',37 'shimmer': 'shimmer 2s linear infinite',38 'slide-up': 'slideUp 0.5s ease-out',39 'bounce-slow': 'bounce 3s infinite',40 },41 keyframes: {42 float: {43 '0%, 100%': { transform: 'translateY(0px)' },44 '50%': { transform: 'translateY(-20px)' },45 },46 shimmer: {47 '0%': { backgroundPosition: '-200% 0' },48 '100%': { backgroundPosition: '200% 0' },49 },50 slideUp: {51 '0%': { transform: 'translateY(30px)', opacity: '0' },52 '100%': { transform: 'translateY(0)', opacity: '1' },53 }54 }55 }56 }57 }58 </script>59 60 <style>61 body {62 font-family: 'Inter', sans-serif;63 background: #fafafa;64 }65 66 .gradient-text {67 background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 50%, #ec4899 100%);68 background-size: 200% 200%;69 -webkit-background-clip: text;70 -webkit-text-fill-color: transparent;71 background-clip: text;72 animation: gradient 8s ease infinite;73 }74 75 @keyframes gradient {76 '0%, 100%': { backgroundPosition: '0% 50%' },77 '50%': { backgroundPosition: '100% 50%' },78 }79 80 .glass {81 background: rgba(255, 255, 255, 0.8);82 backdrop-filter: blur(20px);83 border: 1px solid rgba(255, 255, 255, 0.3);84 }85 86 .neo-card {87 background: white;88 border-radius: 24px;89 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);90 border: 1px solid rgba(229, 231, 235, 0.5);91 }92 93 .btn-gradient {94 background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);95 transition: all 0.3s ease;96 }97 98 .btn-gradient:hover {99 transform: translateY(-2px);100 box-shadow: 0 20px 40px rgba(14, 165, 233, 0.3);101 }102 103 .prototype-container {104 background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);105 border-radius: 16px;106 overflow: hidden;107 }108 109 .workflow-node {110 background: rgba(255, 255, 255, 0.1);111 backdrop-filter: blur(10px);112 border: 1px solid rgba(255, 255, 255, 0.2);113 border-radius: 12px;114 padding: 16px;115 transition: all 0.3s ease;116 cursor: pointer;117 }118 119 .workflow-node:hover {120 background: rgba(255, 255, 255, 0.15);121 transform: translateY(-2px);122 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);123 }124 125 .workflow-node.active {126 border-color: #0ea5e9;127 box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);128 }129 130 .connector {131 stroke: rgba(255, 255, 255, 0.3);132 stroke-width: 2;133 fill: none;134 stroke-dasharray: 5, 5;135 animation: dash 1s linear infinite;136 }137 138 @keyframes dash {139 to {140 stroke-dashoffset: -10;141 }142 }143 144 .video-container {145 position: relative;146 background: #0f172a;147 border-radius: 24px;148 overflow: hidden;149 }150 151 .play-button {152 position: absolute;153 top: 50%;154 left: 50%;155 transform: translate(-50%, -50%);156 width: 80px;157 height: 80px;158 background: rgba(255, 255, 255, 0.9);159 border-radius: 50%;160 display: flex;161 align-items: center;162 justify-content: center;163 cursor: pointer;164 transition: all 0.3s ease;165 backdrop-filter: blur(10px);166 }167 168 .play-button:hover {169 transform: translate(-50%, -50%) scale(1.1);170 background: white;171 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);172 }173 174 .feature-tab {175 transition: all 0.3s ease;176 border: 2px solid transparent;177 }178 179 .feature-tab.active {180 border-color: #0ea5e9;181 background: rgba(14, 165, 233, 0.1);182 }183 184 .demo-screen {185 transition: all 0.5s ease;186 }187 188 .typing-cursor::after {189 content: '|';190 animation: blink 1s infinite;191 }192 193 @keyframes blink {194 0%, 50% { opacity: 1; }195 51%, 100% { opacity: 0; }196 }197 198 .stats-counter {199 font-variant-numeric: tabular-nums;200 }201 202 /* Custom scrollbar */203 ::-webkit-scrollbar {204 width: 8px;205 }206 ::-webkit-scrollbar-track {207 background: #f1f5f9;208 }209 ::-webkit-scrollbar-thumb {210 background: #cbd5e1;211 border-radius: 4px;212 }213 ::-webkit-scrollbar-thumb:hover {214 background: #94a3b8;215 }216 </style>217</head>218<body class="text-slate-900 overflow-x-hidden">219 220 <!-- Navigation -->221 <nav class="fixed w-full z-50 glass border-b border-slate-200/50">222 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">223 <div class="flex justify-between items-center h-16">224 <a href="index.html" class="flex items-center space-x-2">225 <div class="w-8 h-8 btn-gradient rounded-lg flex items-center justify-center">226 <i data-lucide="zap" class="w-5 h-5 text-white"></i>227 </div>228 <span class="text-xl font-bold bg-gradient-to-r from-sky-500 to-violet-500 bg-clip-text text-transparent">VibeCodingLabs</span>229 </a>230 231 <div class="hidden md:flex items-center space-x-8">232 <a href="#prototype" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Interactive Demo</a>233 <a href="#video" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Watch Demo</a>234 <a href="docs.html" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Documentation</a>235 <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Pricing</a>236 </div>237 238 <div class="flex items-center space-x-4">239 <a href="signup.html?mode=signin" class="hidden md:block text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Sign In</a>240 <a href="signup.html" class="btn-gradient text-white px-5 py-2.5 rounded-full text-sm font-semibold shadow-lg shadow-sky-500/25 hover:shadow-sky-500/40 transition-all">241 Get Started242 </a>243 </div>244 </div>245 </div>246 </nav>247 248 <!-- Hero Section -->249 <section class="pt-32 pb-20 relative overflow-hidden">250 <div class="absolute inset-0 pointer-events-none">251 <div class="absolute top-0 left-1/4 w-96 h-96 bg-sky-200/30 rounded-full blur-3xl"></div>252 <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-violet-200/30 rounded-full blur-3xl"></div>253 </div>254 255 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">256 <div class="text-center max-w-4xl mx-auto mb-16">257 <div class="inline-flex items-center px-4 py-2 rounded-full bg-sky-50 border border-sky-100 text-sky-600 text-sm font-semibold mb-6">258 <span class="flex h-2 w-2 rounded-full bg-sky-500 mr-2 animate-pulse"></span>259 Now with AI-Powered Automation 3.0260 </div>261 262 <h1 class="text-5xl md:text-7xl font-bold tracking-tight mb-6">263 Automate your <br>264 <span class="gradient-text">entire workflow</span>265 </h1>266 267 <p class="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">268 Build powerful automations without code. Connect your tools, streamline processes, and let AI handle the rest.269 </p>270 271 <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">272 <a href="signup.html" class="btn-gradient text-white px-8 py-4 rounded-full font-semibold text-lg shadow-xl shadow-sky-500/25 flex items-center justify-center space-x-2 group">273 <span>Start Free Trial</span>274 <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>275 </a>276 <button onclick="scrollToDemo()" class="bg-white text-slate-700 border border-slate-200 px-8 py-4 rounded-full font-semibold text-lg hover:border-sky-300 hover:text-sky-600 transition-all flex items-center justify-center space-x-2 shadow-lg">277 <i data-lucide="play-circle" class="w-5 h-5"></i>278 <span>See Interactive Demo</span>279 </button>280 </div>281 282 <div class="flex items-center justify-center space-x-6 text-sm text-slate-500">283 <span class="flex items-center"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-500 mr-1"></i> 14-day free</span>284 <span class="flex items-center"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-500 mr-1"></i> No credit card</span>285 <span class="flex items-center"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-500 mr-1"></i> Cancel anytime</span>286 </div>287 </div>288 289 <!-- Interactive Prototype Section -->290 <div id="prototype" class="mt-20">291 <div class="text-center mb-12">292 <h2 class="text-3xl font-bold mb-4">Try the Interactive Prototype</h2>293 <p class="text-slate-600">Click on workflow nodes to see how VibeCodingLabs automates your processes</p>294 </div>295 296 <div class="prototype-container p-8 max-w-5xl mx-auto shadow-2xl">297 <div class="flex items-center justify-between mb-8">298 <div class="flex items-center space-x-4">299 <div class="flex items-center space-x-2">300 <div class="w-3 h-3 rounded-full bg-red-400"></div>301 <div class="w-3 h-3 rounded-full bg-yellow-400"></div>302 <div class="w-3 h-3 rounded-full bg-green-400"></div>303 </div>304 <span class="text-white/60 text-sm font-medium">VibeCodingLabs Workflow Builder</span>305 </div>306 <div class="flex space-x-2">307 <button onclick="runWorkflow()" id="run-btn" class="px-4 py-2 bg-sky-500 hover:bg-sky-600 text-white rounded-lg text-sm font-medium transition-colors flex items-center space-x-2">308 <i data-lucide="play" class="w-4 h-4"></i>309 <span>Run Workflow</span>310 </button>311 <button onclick="resetWorkflow()" class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm font-medium transition-colors">312 Reset313 </button>314 </div>315 </div>316 317 <!-- Workflow Canvas -->318 <div class="relative min-h-[400px]">319 <svg class="absolute inset-0 w-full h-full pointer-events-none" style="z-index: 0;">320 <path id="connector1" class="connector" d="M 200 80 Q 300 80 400 150" />321 <path id="connector2" class="connector" d="M 500 200 Q 600 200 700 150" />322 <path id="connector3" class="connector" d="M 500 200 Q 600 250 700 280" />323 <path id="connector4" class="connector" d="M 800 180 Q 900 200 1000 200" />324 <path id="connector5" class="connector" d="M 800 310 Q 900 280 1000 250" />325 </svg>326 327 <div class="grid grid-cols-4 gap-8 relative" style="z-index: 1;">328 <!-- Trigger Node -->329 <div class="col-span-1">330 <div class="workflow-node active" id="node-trigger" onclick="activateNode('trigger')">331 <div class="flex items-center space-x-3 mb-3">332 <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">333 <i data-lucide="mail" class="w-5 h-5 text-orange-400"></i>334 </div>335 <div class="text-white font-semibold text-sm">Trigger</div>336 </div>337 <div class="text-white/60 text-xs">New email received</div>338 <div class="mt-3 flex items-center space-x-2">339 <span class="px-2 py-1 bg-orange-500/20 rounded text-orange-300 text-xs">Gmail</span>340 </div>341 </div>342 </div>343 344 <!-- AI Process Node -->345 <div class="col-span-1 mt-16">346 <div class="workflow-node" id="node-ai" onclick="activateNode('ai')">347 <div class="flex items-center space-x-3 mb-3">348 <div class="w-10 h-10 rounded-lg bg-violet-500/20 flex items-center justify-center">349 <i data-lucide="brain" class="w-5 h-5 text-violet-400"></i>350 </div>351 <div class="text-white font-semibold text-sm">AI Analysis</div>352 </div>353 <div class="text-white/60 text-xs">Classify & extract data</div>354 <div class="mt-3 w-full bg-white/10 rounded-full h-2 overflow-hidden">355 <div id="ai-progress" class="bg-violet-400 h-full w-0 transition-all duration-1000"></div>356 </div>357 </div>358 </div>359 360 <!-- Branching -->361 <div class="col-span-1 mt-8 space-y-4">362 <div class="workflow-node" id="node-condition" onclick="activateNode('condition')">363 <div class="flex items-center space-x-3 mb-3">364 <div class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">365 <i data-lucide="git-branch" class="w-5 h-5 text-yellow-400"></i>366 </div>367 <div class="text-white font-semibold text-sm">Condition</div>368 </div>369 <div class="text-white/60 text-xs">Priority check</div>370 </div>371 </div>372 373 <!-- Actions -->374 <div class="col-span-1 mt-4 space-y-4">375 <div class="workflow-node" id="node-slack" onclick="activateNode('slack')">376 <div class="flex items-center space-x-3 mb-3">377 <div class="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">378 <i data-lucide="message-square" class="w-5 h-5 text-emerald-400"></i>379 </div>380 <div class="text-white font-semibold text-sm">Notify Team</div>381 </div>382 <div class="text-white/60 text-xs">Send Slack message</div>383 </div>384 385 <div class="workflow-node" id="node-crm" onclick="activateNode('crm')">386 <div class="flex items-center space-x-3 mb-3">387 <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">388 <i data-lucide="database" class="w-5 h-5 text-blue-400"></i>389 </div>390 <div class="text-white font-semibold text-sm">Update CRM</div>391 </div>392 <div class="text-white/60 text-xs">Create lead in Salesforce</div>393 </div>394 </div>395 </div>396 397 <!-- Log Output -->398 <div class="mt-8 p-4 bg-black/30 rounded-xl border border-white/10">399 <div class="flex items-center justify-between mb-3">400 <span class="text-white/60 text-xs font-medium uppercase tracking-wider">Execution Log</span>401 <span id="status-indicator" class="flex items-center space-x-2 text-emerald-400 text-xs">402 <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>403 <span>Ready</span>404 </span>405 </div>406 <div id="execution-log" class="font-mono text-xs text-white/80 space-y-1 h-24 overflow-y-auto">407 <div class="text-white/40">Waiting to start workflow...</div>408 </div>409 </div>410 </div>411 </div>412 </div>413 </div>414 </section>415 416 <!-- Video Demo Section -->417 <section id="video" class="py-24 bg-slate-900">418 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">419 <div class="text-center mb-12">420 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">AI Agents at Work</h2>421 <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>422 </div>423 424 <div class="video-container shadow-2xl aspect-video relative group bg-slate-800 rounded-2xl overflow-hidden border border-slate-700">425 <!-- Dashboard Screen Recording Mock -->426 <div id="dashboard-demo" class="w-full h-full bg-slate-900 relative overflow-hidden">427 <!-- Dashboard Header -->428 <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">429 <div class="flex items-center space-x-3">430 <div class="w-8 h-8 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-lg flex items-center justify-center">431 <i data-lucide="bot" class="w-4 h-4 text-white"></i>432 </div>433 <span class="text-white font-semibold">VibeCodingLabs AI Dashboard</span>434 </div>435 <div class="ml-auto flex items-center space-x-4">436 <div class="flex items-center space-x-2 px-3 py-1.5 bg-emerald-500/20 rounded-full border border-emerald-500/30">437 <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>438 <span class="text-emerald-400 text-xs font-medium">4 Agents Active</span>439 </div>440 <div class="w-8 h-8 rounded-full bg-slate-700"></div>441 </div>442 </div>443 444 <!-- Dashboard Content -->445 <div class="absolute top-14 left-0 right-0 bottom-0 flex">446 <!-- Sidebar -->447 <div class="w-64 bg-slate-800/50 border-r border-slate-700 p-4 hidden md:block">448 <div class="space-y-2">449 <div class="flex items-center space-x-3 px-3 py-2 bg-sky-500/20 rounded-lg border border-sky-500/30">450 <i data-lucide="layout-dashboard" class="w-4 h-4 text-sky-400"></i>451 <span class="text-sky-400 text-sm font-medium">Active Tasks</span>452 </div>453 <div class="flex items-center space-x-3 px-3 py-2 text-slate-400 hover:text-white cursor-pointer">454 <i data-lucide="users" class="w-4 h-4"></i>455 <span class="text-sm">Team</span>456 </div>457 <div class="flex items-center space-x-3 px-3 py-2 text-slate-400 hover:text-white cursor-pointer">458 <i data-lucide="git-branch" class="w-4 h-4"></i>459 <span class="text-sm">Workflows</span>460 </div>461 <div class="flex items-center space-x-3 px-3 py-2 text-slate-400 hover:text-white cursor-pointer">462 <i data-lucide="bar-chart-3" class="w-4 h-4"></i>463 <span class="text-sm">Analytics</span>464 </div>465 </div>466 </div>467 468 <!-- Main Content Area -->469 <div class="flex-1 p-6 overflow-hidden">470 <!-- Task Feed -->471 <div class="max-w-3xl mx-auto space-y-3" id="agent-task-feed">472 <!-- Tasks will be animated here -->473 </div>474 </div>475 </div>476 477 <!-- AI Agent Activity Overlay -->478 <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">479 <div class="flex items-center space-x-3 mb-3">480 <div class="w-2 h-2 rounded-full bg-violet-400 animate-pulse"></div>481 <span class="text-white text-sm font-medium">AI Agent Activity</span>482 </div>483 <div id="agent-status-text" class="text-slate-400 text-xs leading-relaxed">484 Monitoring incoming tasks...485 </div>486 </div>487 </div>488 489 <!-- Play Overlay (shown when paused) -->490 <div id="video-overlay" class="absolute inset-0 bg-black/60 flex items-center justify-center cursor-pointer z-40" onclick="toggleDashboardDemo()">491 <div class="play-button bg-white/95 hover:bg-white hover:scale-110 transition-all">492 <i data-lucide="play" class="w-8 h-8 text-slate-900 ml-1"></i>493 </div>494 </div>495 496 <!-- Dashboard Controls -->497 <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/90 to-transparent z-30">498 <div class="flex items-center space-x-4 text-white">499 <button onclick="toggleDashboardDemo()" class="hover:text-sky-400 transition-colors">500 <i data-lucide="play" id="dashboard-play-icon" class="w-6 h-6"></i>501 </button>502 <div class="flex-1 h-1 bg-white/20 rounded-full overflow-hidden cursor-pointer" onclick="seekDashboardDemo(event)">503 <div id="dashboard-progress" class="h-full bg-violet-500 w-0 transition-all duration-300"></div>504 </div>505 <span id="dashboard-time" class="text-sm font-medium text-slate-300">0:00 / 0:45</span>506 <button onclick="toggleDashboardMute()" class="hover:text-sky-400 transition-colors">507 <i data-lucide="volume-2" id="dashboard-volume-icon" class="w-5 h-5"></i>508 </button>509 </div>510 </div>511 </div>512 513 <div class="grid md:grid-cols-3 gap-6 mt-12">514 <div class="bg-slate-800/50 border border-slate-700 p-6 rounded-2xl text-center hover:border-sky-500/50 transition-colors">515 <div class="w-12 h-12 bg-sky-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">516 <i data-lucide="bot" class="w-6 h-6 text-sky-400"></i>517 </div>518 <h3 class="font-semibold text-lg mb-2 text-white">AI Agents Work 24/7</h3>519 <p class="text-slate-400 text-sm">Autonomous agents handle tasks round-the-clock without supervision</p>520 </div>521 <div class="bg-slate-800/50 border border-slate-700 p-6 rounded-2xl text-center hover:border-violet-500/50 transition-colors">522 <div class="w-12 h-12 bg-violet-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">523 <i data-lucide="workflow" class="w-6 h-6 text-violet-400"></i>524 </div>525 <h3 class="font-semibold text-lg mb-2 text-white">Multi-Step Reasoning</h3>526 <p class="text-slate-400 text-sm">Agents break down complex tasks and execute across multiple tools</p>527 </div>528 <div class="bg-slate-800/50 border border-slate-700 p-6 rounded-2xl text-center hover:border-emerald-500/50 transition-colors">529 <div class="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">530 <i data-lucide="shield-check" class="w-6 h-6 text-emerald-400"></i>531 </div>532 <h3 class="font-semibold text-lg mb-2 text-white">Human-in-the-Loop</h3>533 <p class="text-slate-400 text-sm">Smart escalation to humans when critical decisions are needed</p>534 </div>535 </div>536 </div>537 </section>538 539 <!-- Feature Showcase with Interactive Tabs -->540 <section class="py-24 bg-slate-50">541 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">542 <div class="grid lg:grid-cols-2 gap-16 items-center">543 <div>544 <h2 class="text-3xl md:text-4xl font-bold mb-6">Powerful features for modern teams</h2>545 <p class="text-slate-600 text-lg mb-8">Everything you need to build, deploy, and scale your automations.</p>546 547 <div class="space-y-4">548 <button onclick="switchTab('builder')" id="tab-builder" class="feature-tab active w-full text-left p-4 rounded-xl bg-white shadow-sm">549 <div class="flex items-start space-x-4">550 <div class="w-10 h-10 bg-sky-100 rounded-lg flex items-center justify-center flex-shrink-0">551 <i data-lucide="layout" class="w-5 h-5 text-sky-600"></i>552 </div>553 <div>554 <h3 class="font-semibold mb-1">Visual Workflow Builder</h3>555 <p class="text-slate-600 text-sm">Drag-and-drop interface to create complex automations without code</p>556 </div>557 </div>558 </button>559 560 <button onclick="switchTab('ai')" id="tab-ai" class="feature-tab w-full text-left p-4 rounded-xl bg-white shadow-sm">561 <div class="flex items-start space-x-4">562 <div class="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center flex-shrink-0">563 <i data-lucide="sparkles" class="w-5 h-5 text-violet-600"></i>564 </div>565 <div>566 <h3 class="font-semibold mb-1">AI-Powered Decisions</h3>567 <p class="text-slate-600 text-sm">Let AI classify, route, and process your data automatically</p>568 </div>569 </div>570 </button>571 572 <button onclick="switchTab('integrations')" id="tab-integrations" class="feature-tab w-full text-left p-4 rounded-xl bg-white shadow-sm">573 <div class="flex items-start space-x-4">574 <div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">575 <i data-lucide="plug" class="w-5 h-5 text-emerald-600"></i>576 </div>577 <div>578 <h3 class="font-semibold mb-1">500+ Integrations</h3>579 <p class="text-slate-600 text-sm">Connect with Slack, Salesforce, HubSpot, and all your favorite tools</p>580 </div>581 </div>582 </button>583 </div>584 </div>585 586 <div class="relative">587 <div id="screen-builder" class="demo-screen neo-card p-2 shadow-2xl">588 <img src="http://static.photos/technology/800x600/100" alt="Workflow Builder" class="w-full rounded-xl">589 </div>590 <div id="screen-ai" class="demo-screen neo-card p-2 shadow-2xl hidden">591 <img src="http://static.photos/technology/800x600/101" alt="AI Features" class="w-full rounded-xl">592 </div>593 <div id="screen-integrations" class="demo-screen neo-card p-2 shadow-2xl hidden">594 <img src="http://static.photos/technology/800x600/102" alt="Integrations" class="w-full rounded-xl">595 </div>596 </div>597 </div>598 </div>599 </section>600 601 <!-- Live Stats Section -->602 <section class="py-20 bg-slate-900 text-white">603 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">604 <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">605 <div>606 <div class="text-4xl md:text-5xl font-bold text-sky-400 stats-counter" id="stat-workflows">0</div>607 <div class="text-slate-400 mt-2">Workflows Created</div>608 </div>609 <div>610 <div class="text-4xl md:text-5xl font-bold text-violet-400 stats-counter" id="stat-tasks">0</div>611 <div class="text-slate-400 mt-2">Tasks Automated</div>612 </div>613 <div>614 <div class="text-4xl md:text-5xl font-bold text-emerald-400 stats-counter" id="stat-hours">0</div>615 <div class="text-slate-400 mt-2">Hours Saved</div>616 </div>617 <div>618 <div class="text-4xl md:text-5xl font-bold text-orange-400 stats-counter" id="stat-teams">0</div>619 <div class="text-slate-400 mt-2">Active Teams</div>620 </div>621 </div>622 </div>623 </section>624 625 <!-- Pricing Section -->626 <section id="pricing" class="py-24 bg-white">627 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">628 <div class="text-center mb-16">629 <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, transparent pricing</h2>630 <p class="text-slate-600 text-lg">Start free, scale as you grow</p>631 </div>632 633 <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">634 <div class="neo-card p-8">635 <h3 class="text-lg font-semibold text-slate-600 mb-2">Starter</h3>636 <div class="text-4xl font-bold mb-4">Free</div>637 <p class="text-slate-600 text-sm mb-6">Perfect for trying out VibeCodingLabs</p>638 <ul class="space-y-3 mb-8 text-sm">639 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> 3 workflows</li>640 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> 100 tasks/month</li>641 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Basic integrations</li>642 </ul>643 <a href="signup.html" class="block w-full py-3 text-center border border-slate-200 rounded-xl font-semibold hover:border-sky-500 hover:text-sky-600 transition-all">Get Started</a>644 </div>645 646 <div class="neo-card p-8 relative bg-gradient-to-b from-sky-50 to-white border-sky-200">647 <div class="absolute -top-3 left-1/2 -translate-x-1/2">648 <span class="bg-sky-500 text-white px-4 py-1 rounded-full text-xs font-semibold">Most Popular</span>649 </div>650 <h3 class="text-lg font-semibold text-sky-600 mb-2">Pro</h3>651 <div class="text-4xl font-bold mb-4">$29<span class="text-lg text-slate-500 font-normal">/mo</span></div>652 <p class="text-slate-600 text-sm mb-6">For growing teams</p>653 <ul class="space-y-3 mb-8 text-sm">654 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Unlimited workflows</li>655 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> 10,000 tasks/month</li>656 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> AI features</li>657 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Priority support</li>658 </ul>659 <a href="signup.html?plan=pro" class="block w-full py-3 text-center btn-gradient text-white rounded-xl font-semibold hover:shadow-lg transition-all">Start Free Trial</a>660 </div>661 662 <div class="neo-card p-8">663 <h3 class="text-lg font-semibold text-slate-600 mb-2">Enterprise</h3>664 <div class="text-4xl font-bold mb-4">Custom</div>665 <p class="text-slate-600 text-sm mb-6">For large organizations</p>666 <ul class="space-y-3 mb-8 text-sm">667 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Everything in Pro</li>668 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Unlimited tasks</li>669 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> SSO & Security</li>670 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Dedicated support</li>671 </ul>672 <a href="signup.html?plan=enterprise" class="block w-full py-3 text-center border border-slate-200 rounded-xl font-semibold hover:border-sky-500 hover:text-sky-600 transition-all">Contact Sales</a>673 </div>674 </div>675 </div>676 </section>677 678 <!-- Footer -->679 <footer class="bg-slate-900 text-slate-400 py-12">680 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">681 <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">682 <div class="col-span-2">683 <div class="flex items-center space-x-2 mb-4">684 <div class="w-8 h-8 btn-gradient rounded-lg flex items-center justify-center">685 <i data-lucide="zap" class="w-5 h-5 text-white"></i>686 </div>687 <span class="text-xl font-bold text-white">VibeCodingLabs</span>688 </div>689 <p class="text-sm mb-4">Intelligent workflow automation for modern teams.</p>690 </div>691 <div>692 <h4 class="text-white font-semibold mb-4">Product</h4>693 <ul class="space-y-2 text-sm">694 <li><a href="#prototype" class="hover:text-white transition-colors">Interactive Demo</a></li>695 <li><a href="#video" class="hover:text-white transition-colors">Video Demo</a></li>696 <li><a href="docs.html" class="hover:text-white transition-colors">Documentation</a></li>697 <li><a href="#pricing" class="hover:text-white transition-colors">Pricing</a></li>698 </ul>699 </div>700 <div>701 <h4 class="text-white font-semibold mb-4">Resources</h4>702 <ul class="space-y-2 text-sm">703 <li><a href="docs.html#api" class="hover:text-white transition-colors">API Reference</a></li>704 <li><a href="docs.html#playground" class="hover:text-white transition-colors">Playground</a></li>705 <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>706 <li><a href="#" class="hover:text-white transition-colors">Support</a></li>707 </ul>708 </div>709 </div>710 <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center">711 <p class="text-sm">© 2024 VibeCodingLabs. All rights reserved.</p>712 <div class="flex space-x-6 mt-4 md:mt-0">713 <a href="#" class="hover:text-white transition-colors"><i data-lucide="twitter" class="w-5 h-5"></i></a>714 <a href="#" class="hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>715 <a href="#" class="hover:text-white transition-colors"><i data-lucide="linkedin" class="w-5 h-5"></i></a>716 </div>717 </div>718 </div>719 </footer>720 721 <script>722 // Initialize Lucide icons723 lucide.createIcons();724 725 // Workflow Prototype Logic726 let workflowRunning = false;727 let activeNodes = new Set();728 729 function activateNode(nodeId) {730 if (workflowRunning) return;731 732 const node = document.getElementById(`node-${nodeId}`);733 node.classList.toggle('active');734 735 if (node.classList.contains('active')) {736 activeNodes.add(nodeId);737 addLog(`Node "${nodeId}" activated`);738 } else {739 activeNodes.delete(nodeId);740 addLog(`Node "${nodeId}" deactivated`);741 }742 }743 744 async function runWorkflow() {745 if (workflowRunning) return;746 workflowRunning = true;747 748 const btn = document.getElementById('run-btn');749 btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Running...</span>';750 lucide.createIcons();751 752 document.getElementById('status-indicator').innerHTML = '<span class="w-2 h-2 rounded-full bg-sky-400 animate-pulse"></span><span>Running</span>';753 754 const nodes = ['trigger', 'ai', 'condition', 'slack', 'crm'];755 const log = document.getElementById('execution-log');756 log.innerHTML = '';757 758 for (const nodeId of nodes) {759 const node = document.getElementById(`node-${nodeId}`);760 node.classList.add('active');761 762 if (nodeId === 'ai') {763 document.getElementById('ai-progress').style.width = '100%';764 }765 766 addLog(`Executing: ${nodeId}...`);767 await sleep(800);768 addLog(`✓ ${nodeId} completed`);769 770 if (nodeId !== 'trigger' && nodeId !== 'slack' && nodeId !== 'crm') {771 node.classList.remove('active');772 }773 document.getElementById('ai-progress').style.width = '0%';774 }775 776 addLog('🎉 Workflow completed successfully!');777 document.getElementById('status-indicator').innerHTML = '<span class="w-2 h-2 rounded-full bg-emerald-400"></span><span>Completed</span>';778 779 btn.innerHTML = '<i data-lucide="play" class="w-4 h-4"></i><span>Run Workflow</span>';780 lucide.createIcons();781 workflowRunning = false;782 }783 784 function resetWorkflow() {785 if (workflowRunning) return;786 787 document.querySelectorAll('.workflow-node').forEach(node => {788 node.classList.remove('active');789 });790 document.getElementById('ai-progress').style.width = '0%';791 document.getElementById('execution-log').innerHTML = '<div class="text-white/40">Waiting to start workflow...</div>';792 document.getElementById('status-indicator').innerHTML = '<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span><span>Ready</span>';793 activeNodes.clear();794 }795 796 function addLog(message) {797 const log = document.getElementById('execution-log');798 const entry = document.createElement('div');799 entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;800 entry.className = 'typing-cursor';801 log.appendChild(entry);802 log.scrollTop = log.scrollHeight;803 804 setTimeout(() => entry.classList.remove('typing-cursor'), 1000);805 }806 807 function sleep(ms) {808 return new Promise(resolve => setTimeout(resolve, ms));809 }810 811 // AI Dashboard Demo Logic812 let demoRunning = false;813 let demoInterval;814 let currentTask = 0;815 const totalDemoTime = 45000; // 45 seconds816 817 const agentTasks = [818 { agent: 'Email Agent', action: 'Received new inquiry from client@acme.com', icon: 'mail', color: 'sky', time: 0 },819 { agent: 'Classifier AI', action: 'Categorized as "High-Priority Lead"', icon: 'sparkles', color: 'violet', time: 2000 },820 { agent: 'CRM Agent', action: 'Created lead in Salesforce with extracted details', icon: 'database', color: 'blue', time: 4000 },821 { agent: 'Slack Agent', action: 'Notified sales team in #new-leads channel', icon: 'message-square', color: 'emerald', time: 6000 },822 { agent: 'Calendar Agent', action: 'Checked availability and scheduled follow-up', icon: 'calendar', color: 'orange', time: 8000 },823 { agent: 'Email Agent', action: 'Sent personalized response to client', icon: 'send', color: 'sky', time: 10000 },824 { agent: 'Analytics Agent', action: 'Updated conversion tracking dashboard', icon: 'bar-chart-2', color: 'fuchsia', time: 12000 },825 { agent: 'Email Agent', action: 'Received support ticket #2847', icon: 'ticket', color: 'sky', time: 15000 },826 { agent: 'Classifier AI', action: 'Identified as "Technical Issue - Escalate"', icon: 'alert-triangle', color: 'violet', time: 17000 },827 { agent: 'Support Agent', action: 'Assigned to senior engineer Sarah Chen', icon: 'user-check', color: 'rose', time: 19000 },828 { agent: 'GitHub Agent', action: 'Created issue with logs and reproduction steps', icon: 'github', color: 'slate', time: 21000 },829 { agent: 'Slack Agent', action: 'Alerted engineering team with priority flag', icon: 'bell', color: 'emerald', time: 23000 },830 { agent: 'Docs Agent', action: 'Searched knowledge base for similar issues', icon: 'search', color: 'amber', time: 25000 },831 { agent: 'Email Agent', action: 'Sent acknowledgment to customer with ETA', icon: 'clock', color: 'sky', time: 27000 },832 { agent: 'Invoice Agent', action: 'Processed monthly subscription renewals (47)', icon: 'credit-card', color: 'cyan', time: 30000 },833 { agent: 'Finance AI', action: 'Flagged 3 accounts for payment retry', icon: 'alert-circle', color: 'yellow', time: 32000 },834 { agent: 'Stripe Agent', action: 'Updated payment methods for expired cards', icon: 'refresh-cw', color: 'indigo', time: 34000 },835 { agent: 'Slack Agent', action: 'Reported revenue metrics to #finance', icon: 'trending-up', color: 'emerald', time: 36000 },836 { agent: 'Sync Agent', action: 'Reconciled data across 12 connected platforms', icon: 'sync', color: 'teal', time: 38000 },837 { agent: 'Maintenance', action: 'Optimizing workflows... Demo complete', icon: 'check-circle', color: 'emerald', time: 42000 }838 ];839 840 function toggleDashboardDemo() {841 if (demoRunning) {842 pauseDashboardDemo();843 } else {844 playDashboardDemo();845 }846 }847 848 function playDashboardDemo() {849 demoRunning = true;850 document.getElementById('video-overlay').classList.add('hidden');851 document.getElementById('dashboard-play-icon').setAttribute('data-lucide', 'pause');852 lucide.createIcons();853 854 const startTime = Date.now();855 856 demoInterval = setInterval(() => {857 const elapsed = Date.now() - startTime;858 const progress = Math.min((elapsed / totalDemoTime) * 100, 100);859 document.getElementById('dashboard-progress').style.width = `${progress}%`;860 861 // Update time display862 const currentSecs = Math.floor(elapsed / 1000);863 const totalSecs = Math.floor(totalDemoTime / 1000);864 document.getElementById('dashboard-time').textContent = 865 `${Math.floor(currentSecs/60)}:${(currentSecs%60).toString().padStart(2,'0')} / ${Math.floor(totalSecs/60)}:${(totalSecs%60).toString().padStart(2,'0')}`;866 867 // Check for tasks to show868 agentTasks.forEach((task, index) => {869 if (elapsed >= task.time && !task.shown) {870 task.shown = true;871 showAgentTask(task, index);872 updateAgentStatus(task);873 }874 });875 876 if (elapsed >= totalDemoTime) {877 pauseDashboardDemo();878 // Reset for replay879 setTimeout(() => {880 agentTasks.forEach(t => t.shown = false);881 document.getElementById('agent-task-feed').innerHTML = '';882 currentTask = 0;883 }, 2000);884 }885 }, 100);886 }887 888 function pauseDashboardDemo() {889 demoRunning = false;890 clearInterval(demoInterval);891 document.getElementById('video-overlay').classList.remove('hidden');892 document.getElementById('dashboard-play-icon').setAttribute('data-lucide', 'play');893 lucide.createIcons();894 }895 896 function showAgentTask(task, index) {897 const feed = document.getElementById('agent-task-feed');898 const taskEl = document.createElement('div');899 900 const colorMap = {901 sky: 'bg-sky-500/20 border-sky-500/30 text-sky-400',902 violet: 'bg-violet-500/20 border-violet-500/30 text-violet-400',903 blue: 'bg-blue-500/20 border-blue-500/30 text-blue-400',904 emerald: 'bg-emerald-500/20 border-emerald-500/30 text-emerald-400',905 orange: 'bg-orange-500/20 border-orange-500/30 text-orange-400',906 fuchsia: 'bg-fuchsia-500/20 border-fuchsia-500/30 text-fuchsia-400',907 rose: 'bg-rose-500/20 border-rose-500/30 text-rose-400',908 slate: 'bg-slate-500/20 border-slate-500/30 text-slate-400',909 amber: 'bg-amber-500/20 border-amber-500/30 text-amber-400',910 cyan: 'bg-cyan-500/20 border-cyan-500/30 text-cyan-400',911 yellow: 'bg-yellow-500/20 border-yellow-500/30 text-yellow-400',912 indigo: 'bg-indigo-500/20 border-indigo-500/30 text-indigo-400',913 teal: 'bg-teal-500/20 border-teal-500/30 text-teal-400'914 };915 916 const colorClass = colorMap[task.color] || colorMap.sky;917 918 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`;919 taskEl.innerHTML = `920 <div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0">921 <i data-lucide="${task.icon}" class="w-5 h-5"></i>922 </div>923 <div class="flex-1 min-w-0">924 <div class="flex items-center space-x-2 mb-1">925 <span class="font-semibold text-sm">${task.agent}</span>926 <span class="text-xs opacity-60">• Just now</span>927 </div>928 <p class="text-sm opacity-90 truncate">${task.action}</p>929 </div>930 <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>931 `;932 933 feed.insertBefore(taskEl, feed.firstChild);934 935 // Animate in936 setTimeout(() => {937 taskEl.classList.remove('translate-y-4', 'opacity-0');938 }, 50);939 940 // Keep only last 5 tasks visible941 while (feed.children.length > 5) {942 feed.removeChild(feed.lastChild);943 }944 945 lucide.createIcons();946 }947 948 function updateAgentStatus(task) {949 const statusText = document.getElementById('agent-status-text');950 statusText.textContent = `${task.agent} is ${task.action.toLowerCase()}...`;951 952 // Flash the activity indicator953 const indicator = document.querySelector('.bg-violet-400');954 if (indicator) {955 indicator.classList.remove('animate-pulse');956 void indicator.offsetWidth; // Trigger reflow957 indicator.classList.add('animate-pulse');958 }959 }960 961 function seekDashboardDemo(e) {962 // Visual feedback only - in real implementation would seek to position963 const rect = e.currentTarget.getBoundingClientRect();964 const pos = (e.clientX - rect.left) / rect.width;965 document.getElementById('dashboard-progress').style.width = `${pos * 100}%`;966 }967 968 function toggleDashboardMute() {969 const icon = document.getElementById('dashboard-volume-icon');970 if (icon.getAttribute('data-lucide') === 'volume-2') {971 icon.setAttribute('data-lucide', 'volume-x');972 } else {973 icon.setAttribute('data-lucide', 'volume-2');974 }975 lucide.createIcons();976 }977 978 // Feature Tabs979 function switchTab(tab) {980 document.querySelectorAll('.feature-tab').forEach(t => t.classList.remove('active'));981 document.getElementById(`tab-${tab}`).classList.add('active');982 983 document.querySelectorAll('.demo-screen').forEach(s => s.classList.add('hidden'));984 document.getElementById(`screen-${tab}`).classList.remove('hidden');985 }986 987 function scrollToDemo() {988 document.getElementById('prototype').scrollIntoView({ behavior: 'smooth' });989 }990 991 // Animated Stats992 function animateStats() {993 const stats = [994 { id: 'stat-workflows', target: 125000, suffix: '+' },995 { id: 'stat-tasks', target: 5000000, suffix: '+' },996 { id: 'stat-hours', target: 850000, suffix: 'K' },997 { id: 'stat-teams', target: 2500, suffix: '+' }998 ];999 1000 stats.forEach(stat => {1001 const element = document.getElementById(stat.id);1002 let current = 0;1003 const increment = stat.target / 100;1004 const timer = setInterval(() => {1005 current += increment;1006 if (current >= stat.target) {1007 current = stat.target;1008 clearInterval(timer);1009 }1010 element.textContent = Math.floor(current).toLocaleString() + stat.suffix;1011 }, 20);1012 });1013 }1014 1015 // Intersection Observer for stats1016 const observer = new IntersectionObserver((entries) => {1017 entries.forEach(entry => {1018 if (entry.isIntersecting) {1019 animateStats();1020 observer.unobserve(entry.target);1021 }1022 });1023 });1024 1025 observer.observe(document.getElementById('stat-workflows'));1026 1027 // Smooth scroll for anchor links1028 document.querySelectorAll('a[href^="#"]').forEach(anchor => {1029 anchor.addEventListener('click', function (e) {1030 e.preventDefault();1031 const target = document.querySelector(this.getAttribute('href'));1032 if (target) {1033 target.scrollIntoView({ behavior: 'smooth', block: 'start' });1034 }1035 });1036 });1037 </script>1038</body>1039</html>