| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VibeCodingLabs - Intelligent Workflow Automation</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| }, |
| colors: { |
| brand: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| } |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'shimmer': 'shimmer 2s linear infinite', |
| 'slide-up': 'slideUp 0.5s ease-out', |
| 'bounce-slow': 'bounce 3s infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0px)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| shimmer: { |
| '0%': { backgroundPosition: '-200% 0' }, |
| '100%': { backgroundPosition: '200% 0' }, |
| }, |
| slideUp: { |
| '0%': { transform: 'translateY(30px)', opacity: '0' }, |
| '100%': { transform: 'translateY(0)', opacity: '1' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| background: #fafafa; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 50%, #ec4899 100%); |
| background-size: 200% 200%; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| animation: gradient 8s ease infinite; |
| } |
| |
| @keyframes gradient { |
| '0%, 100%': { backgroundPosition: '0% 50%' }, |
| '50%': { backgroundPosition: '100% 50%' }, |
| } |
| |
| .glass { |
| background: rgba(255, 255, 255, 0.8); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| } |
| |
| .neo-card { |
| background: white; |
| border-radius: 24px; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| border: 1px solid rgba(229, 231, 235, 0.5); |
| } |
| |
| .btn-gradient { |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-gradient:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 20px 40px rgba(14, 165, 233, 0.3); |
| } |
| |
| .prototype-container { |
| background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); |
| border-radius: 16px; |
| overflow: hidden; |
| } |
| |
| .workflow-node { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 12px; |
| padding: 16px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .workflow-node:hover { |
| background: rgba(255, 255, 255, 0.15); |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); |
| } |
| |
| .workflow-node.active { |
| border-color: #0ea5e9; |
| box-shadow: 0 0 20px rgba(14, 165, 233, 0.5); |
| } |
| |
| .connector { |
| stroke: rgba(255, 255, 255, 0.3); |
| stroke-width: 2; |
| fill: none; |
| stroke-dasharray: 5, 5; |
| animation: dash 1s linear infinite; |
| } |
| |
| @keyframes dash { |
| to { |
| stroke-dashoffset: -10; |
| } |
| } |
| |
| .video-container { |
| position: relative; |
| background: #0f172a; |
| border-radius: 24px; |
| overflow: hidden; |
| } |
| |
| .play-button { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 80px; |
| height: 80px; |
| background: rgba(255, 255, 255, 0.9); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| } |
| |
| .play-button:hover { |
| transform: translate(-50%, -50%) scale(1.1); |
| background: white; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| } |
| |
| .feature-tab { |
| transition: all 0.3s ease; |
| border: 2px solid transparent; |
| } |
| |
| .feature-tab.active { |
| border-color: #0ea5e9; |
| background: rgba(14, 165, 233, 0.1); |
| } |
| |
| .demo-screen { |
| transition: all 0.5s ease; |
| } |
| |
| .typing-cursor::after { |
| content: '|'; |
| animation: blink 1s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 50% { opacity: 1; } |
| 51%, 100% { opacity: 0; } |
| } |
| |
| .stats-counter { |
| font-variant-numeric: tabular-nums; |
| } |
| |
| /* Custom scrollbar */ |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f5f9; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #cbd5e1; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #94a3b8; |
| } |
| </style> |
| </head> |
| <body class="text-slate-900 overflow-x-hidden"> |
|
|
| |
| <nav class="fixed w-full z-50 glass border-b border-slate-200/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <a href="index.html" class="flex items-center space-x-2"> |
| <div class="w-8 h-8 btn-gradient rounded-lg flex items-center justify-center"> |
| <i data-lucide="zap" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="text-xl font-bold bg-gradient-to-r from-sky-500 to-violet-500 bg-clip-text text-transparent">VibeCodingLabs</span> |
| </a> |
| |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#prototype" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Interactive Demo</a> |
| <a href="#video" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Watch Demo</a> |
| <a href="docs.html" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Documentation</a> |
| <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors">Pricing</a> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <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> |
| <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"> |
| Get Started |
| </a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="pt-32 pb-20 relative overflow-hidden"> |
| <div class="absolute inset-0 pointer-events-none"> |
| <div class="absolute top-0 left-1/4 w-96 h-96 bg-sky-200/30 rounded-full blur-3xl"></div> |
| <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-violet-200/30 rounded-full blur-3xl"></div> |
| </div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> |
| <div class="text-center max-w-4xl mx-auto mb-16"> |
| <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"> |
| <span class="flex h-2 w-2 rounded-full bg-sky-500 mr-2 animate-pulse"></span> |
| Now with AI-Powered Automation 3.0 |
| </div> |
| |
| <h1 class="text-5xl md:text-7xl font-bold tracking-tight mb-6"> |
| Automate your <br> |
| <span class="gradient-text">entire workflow</span> |
| </h1> |
| |
| <p class="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed"> |
| Build powerful automations without code. Connect your tools, streamline processes, and let AI handle the rest. |
| </p> |
| |
| <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8"> |
| <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"> |
| <span>Start Free Trial</span> |
| <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i> |
| </a> |
| <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"> |
| <i data-lucide="play-circle" class="w-5 h-5"></i> |
| <span>See Interactive Demo</span> |
| </button> |
| </div> |
| |
| <div class="flex items-center justify-center space-x-6 text-sm text-slate-500"> |
| <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> |
| <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> |
| <span class="flex items-center"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-500 mr-1"></i> Cancel anytime</span> |
| </div> |
| </div> |
|
|
| |
| <div id="prototype" class="mt-20"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">Try the Interactive Prototype</h2> |
| <p class="text-slate-600">Click on workflow nodes to see how VibeCodingLabs automates your processes</p> |
| </div> |
|
|
| <div class="prototype-container p-8 max-w-5xl mx-auto shadow-2xl"> |
| <div class="flex items-center justify-between mb-8"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> |
| </div> |
| <span class="text-white/60 text-sm font-medium">VibeCodingLabs Workflow Builder</span> |
| </div> |
| <div class="flex space-x-2"> |
| <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"> |
| <i data-lucide="play" class="w-4 h-4"></i> |
| <span>Run Workflow</span> |
| </button> |
| <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"> |
| Reset |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="relative min-h-[400px]"> |
| <svg class="absolute inset-0 w-full h-full pointer-events-none" style="z-index: 0;"> |
| <path id="connector1" class="connector" d="M 200 80 Q 300 80 400 150" /> |
| <path id="connector2" class="connector" d="M 500 200 Q 600 200 700 150" /> |
| <path id="connector3" class="connector" d="M 500 200 Q 600 250 700 280" /> |
| <path id="connector4" class="connector" d="M 800 180 Q 900 200 1000 200" /> |
| <path id="connector5" class="connector" d="M 800 310 Q 900 280 1000 250" /> |
| </svg> |
|
|
| <div class="grid grid-cols-4 gap-8 relative" style="z-index: 1;"> |
| |
| <div class="col-span-1"> |
| <div class="workflow-node active" id="node-trigger" onclick="activateNode('trigger')"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center"> |
| <i data-lucide="mail" class="w-5 h-5 text-orange-400"></i> |
| </div> |
| <div class="text-white font-semibold text-sm">Trigger</div> |
| </div> |
| <div class="text-white/60 text-xs">New email received</div> |
| <div class="mt-3 flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-orange-500/20 rounded text-orange-300 text-xs">Gmail</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-span-1 mt-16"> |
| <div class="workflow-node" id="node-ai" onclick="activateNode('ai')"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-violet-500/20 flex items-center justify-center"> |
| <i data-lucide="brain" class="w-5 h-5 text-violet-400"></i> |
| </div> |
| <div class="text-white font-semibold text-sm">AI Analysis</div> |
| </div> |
| <div class="text-white/60 text-xs">Classify & extract data</div> |
| <div class="mt-3 w-full bg-white/10 rounded-full h-2 overflow-hidden"> |
| <div id="ai-progress" class="bg-violet-400 h-full w-0 transition-all duration-1000"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-span-1 mt-8 space-y-4"> |
| <div class="workflow-node" id="node-condition" onclick="activateNode('condition')"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center"> |
| <i data-lucide="git-branch" class="w-5 h-5 text-yellow-400"></i> |
| </div> |
| <div class="text-white font-semibold text-sm">Condition</div> |
| </div> |
| <div class="text-white/60 text-xs">Priority check</div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-span-1 mt-4 space-y-4"> |
| <div class="workflow-node" id="node-slack" onclick="activateNode('slack')"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center"> |
| <i data-lucide="message-square" class="w-5 h-5 text-emerald-400"></i> |
| </div> |
| <div class="text-white font-semibold text-sm">Notify Team</div> |
| </div> |
| <div class="text-white/60 text-xs">Send Slack message</div> |
| </div> |
|
|
| <div class="workflow-node" id="node-crm" onclick="activateNode('crm')"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center"> |
| <i data-lucide="database" class="w-5 h-5 text-blue-400"></i> |
| </div> |
| <div class="text-white font-semibold text-sm">Update CRM</div> |
| </div> |
| <div class="text-white/60 text-xs">Create lead in Salesforce</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8 p-4 bg-black/30 rounded-xl border border-white/10"> |
| <div class="flex items-center justify-between mb-3"> |
| <span class="text-white/60 text-xs font-medium uppercase tracking-wider">Execution Log</span> |
| <span id="status-indicator" class="flex items-center space-x-2 text-emerald-400 text-xs"> |
| <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> |
| <span>Ready</span> |
| </span> |
| </div> |
| <div id="execution-log" class="font-mono text-xs text-white/80 space-y-1 h-24 overflow-y-auto"> |
| <div class="text-white/40">Waiting to start workflow...</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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 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 bg-slate-800 rounded-2xl overflow-hidden border border-slate-700"> |
| |
| <div id="dashboard-demo" class="w-full h-full bg-slate-900 relative overflow-hidden"> |
| |
| <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">VibeCodingLabs 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> |
| |
| |
| <div class="absolute top-14 left-0 right-0 bottom-0 flex"> |
| |
| <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> |
| |
| |
| <div class="flex-1 p-6 overflow-hidden"> |
| |
| <div class="max-w-3xl mx-auto space-y-3" id="agent-task-feed"> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <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="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/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="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="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 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="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 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="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 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> |
| </section> |
|
|
| |
| <section class="py-24 bg-slate-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> |
| <div> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Powerful features for modern teams</h2> |
| <p class="text-slate-600 text-lg mb-8">Everything you need to build, deploy, and scale your automations.</p> |
| |
| <div class="space-y-4"> |
| <button onclick="switchTab('builder')" id="tab-builder" class="feature-tab active w-full text-left p-4 rounded-xl bg-white shadow-sm"> |
| <div class="flex items-start space-x-4"> |
| <div class="w-10 h-10 bg-sky-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="layout" class="w-5 h-5 text-sky-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">Visual Workflow Builder</h3> |
| <p class="text-slate-600 text-sm">Drag-and-drop interface to create complex automations without code</p> |
| </div> |
| </div> |
| </button> |
| |
| <button onclick="switchTab('ai')" id="tab-ai" class="feature-tab w-full text-left p-4 rounded-xl bg-white shadow-sm"> |
| <div class="flex items-start space-x-4"> |
| <div class="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="sparkles" class="w-5 h-5 text-violet-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">AI-Powered Decisions</h3> |
| <p class="text-slate-600 text-sm">Let AI classify, route, and process your data automatically</p> |
| </div> |
| </div> |
| </button> |
| |
| <button onclick="switchTab('integrations')" id="tab-integrations" class="feature-tab w-full text-left p-4 rounded-xl bg-white shadow-sm"> |
| <div class="flex items-start space-x-4"> |
| <div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="plug" class="w-5 h-5 text-emerald-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">500+ Integrations</h3> |
| <p class="text-slate-600 text-sm">Connect with Slack, Salesforce, HubSpot, and all your favorite tools</p> |
| </div> |
| </div> |
| </button> |
| </div> |
| </div> |
| |
| <div class="relative"> |
| <div id="screen-builder" class="demo-screen neo-card p-2 shadow-2xl"> |
| <img src="http://static.photos/technology/800x600/100" alt="Workflow Builder" class="w-full rounded-xl"> |
| </div> |
| <div id="screen-ai" class="demo-screen neo-card p-2 shadow-2xl hidden"> |
| <img src="http://static.photos/technology/800x600/101" alt="AI Features" class="w-full rounded-xl"> |
| </div> |
| <div id="screen-integrations" class="demo-screen neo-card p-2 shadow-2xl hidden"> |
| <img src="http://static.photos/technology/800x600/102" alt="Integrations" class="w-full rounded-xl"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-slate-900 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold text-sky-400 stats-counter" id="stat-workflows">0</div> |
| <div class="text-slate-400 mt-2">Workflows Created</div> |
| </div> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold text-violet-400 stats-counter" id="stat-tasks">0</div> |
| <div class="text-slate-400 mt-2">Tasks Automated</div> |
| </div> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold text-emerald-400 stats-counter" id="stat-hours">0</div> |
| <div class="text-slate-400 mt-2">Hours Saved</div> |
| </div> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold text-orange-400 stats-counter" id="stat-teams">0</div> |
| <div class="text-slate-400 mt-2">Active Teams</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="py-24 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, transparent pricing</h2> |
| <p class="text-slate-600 text-lg">Start free, scale as you grow</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| <div class="neo-card p-8"> |
| <h3 class="text-lg font-semibold text-slate-600 mb-2">Starter</h3> |
| <div class="text-4xl font-bold mb-4">Free</div> |
| <p class="text-slate-600 text-sm mb-6">Perfect for trying out VibeCodingLabs</p> |
| <ul class="space-y-3 mb-8 text-sm"> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> 3 workflows</li> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> 100 tasks/month</li> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Basic integrations</li> |
| </ul> |
| <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> |
| </div> |
|
|
| <div class="neo-card p-8 relative bg-gradient-to-b from-sky-50 to-white border-sky-200"> |
| <div class="absolute -top-3 left-1/2 -translate-x-1/2"> |
| <span class="bg-sky-500 text-white px-4 py-1 rounded-full text-xs font-semibold">Most Popular</span> |
| </div> |
| <h3 class="text-lg font-semibold text-sky-600 mb-2">Pro</h3> |
| <div class="text-4xl font-bold mb-4">$29<span class="text-lg text-slate-500 font-normal">/mo</span></div> |
| <p class="text-slate-600 text-sm mb-6">For growing teams</p> |
| <ul class="space-y-3 mb-8 text-sm"> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Unlimited workflows</li> |
| <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> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> AI features</li> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Priority support</li> |
| </ul> |
| <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> |
| </div> |
|
|
| <div class="neo-card p-8"> |
| <h3 class="text-lg font-semibold text-slate-600 mb-2">Enterprise</h3> |
| <div class="text-4xl font-bold mb-4">Custom</div> |
| <p class="text-slate-600 text-sm mb-6">For large organizations</p> |
| <ul class="space-y-3 mb-8 text-sm"> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Everything in Pro</li> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Unlimited tasks</li> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> SSO & Security</li> |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 text-emerald-500 mr-2"></i> Dedicated support</li> |
| </ul> |
| <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> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-slate-900 text-slate-400 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8"> |
| <div class="col-span-2"> |
| <div class="flex items-center space-x-2 mb-4"> |
| <div class="w-8 h-8 btn-gradient rounded-lg flex items-center justify-center"> |
| <i data-lucide="zap" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="text-xl font-bold text-white">VibeCodingLabs</span> |
| </div> |
| <p class="text-sm mb-4">Intelligent workflow automation for modern teams.</p> |
| </div> |
| <div> |
| <h4 class="text-white font-semibold mb-4">Product</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#prototype" class="hover:text-white transition-colors">Interactive Demo</a></li> |
| <li><a href="#video" class="hover:text-white transition-colors">Video Demo</a></li> |
| <li><a href="docs.html" class="hover:text-white transition-colors">Documentation</a></li> |
| <li><a href="#pricing" class="hover:text-white transition-colors">Pricing</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="docs.html#api" class="hover:text-white transition-colors">API Reference</a></li> |
| <li><a href="docs.html#playground" class="hover:text-white transition-colors">Playground</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Support</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-sm">© 2024 VibeCodingLabs. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-white transition-colors"><i data-lucide="twitter" class="w-5 h-5"></i></a> |
| <a href="#" class="hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a> |
| <a href="#" class="hover:text-white transition-colors"><i data-lucide="linkedin" class="w-5 h-5"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| let workflowRunning = false; |
| let activeNodes = new Set(); |
| |
| function activateNode(nodeId) { |
| if (workflowRunning) return; |
| |
| const node = document.getElementById(`node-${nodeId}`); |
| node.classList.toggle('active'); |
| |
| if (node.classList.contains('active')) { |
| activeNodes.add(nodeId); |
| addLog(`Node "${nodeId}" activated`); |
| } else { |
| activeNodes.delete(nodeId); |
| addLog(`Node "${nodeId}" deactivated`); |
| } |
| } |
| |
| async function runWorkflow() { |
| if (workflowRunning) return; |
| workflowRunning = true; |
| |
| const btn = document.getElementById('run-btn'); |
| btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Running...</span>'; |
| lucide.createIcons(); |
| |
| document.getElementById('status-indicator').innerHTML = '<span class="w-2 h-2 rounded-full bg-sky-400 animate-pulse"></span><span>Running</span>'; |
| |
| const nodes = ['trigger', 'ai', 'condition', 'slack', 'crm']; |
| const log = document.getElementById('execution-log'); |
| log.innerHTML = ''; |
| |
| for (const nodeId of nodes) { |
| const node = document.getElementById(`node-${nodeId}`); |
| node.classList.add('active'); |
| |
| if (nodeId === 'ai') { |
| document.getElementById('ai-progress').style.width = '100%'; |
| } |
| |
| addLog(`Executing: ${nodeId}...`); |
| await sleep(800); |
| addLog(`✓ ${nodeId} completed`); |
| |
| if (nodeId !== 'trigger' && nodeId !== 'slack' && nodeId !== 'crm') { |
| node.classList.remove('active'); |
| } |
| document.getElementById('ai-progress').style.width = '0%'; |
| } |
| |
| addLog('🎉 Workflow completed successfully!'); |
| document.getElementById('status-indicator').innerHTML = '<span class="w-2 h-2 rounded-full bg-emerald-400"></span><span>Completed</span>'; |
| |
| btn.innerHTML = '<i data-lucide="play" class="w-4 h-4"></i><span>Run Workflow</span>'; |
| lucide.createIcons(); |
| workflowRunning = false; |
| } |
| |
| function resetWorkflow() { |
| if (workflowRunning) return; |
| |
| document.querySelectorAll('.workflow-node').forEach(node => { |
| node.classList.remove('active'); |
| }); |
| document.getElementById('ai-progress').style.width = '0%'; |
| document.getElementById('execution-log').innerHTML = '<div class="text-white/40">Waiting to start workflow...</div>'; |
| document.getElementById('status-indicator').innerHTML = '<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span><span>Ready</span>'; |
| activeNodes.clear(); |
| } |
| |
| function addLog(message) { |
| const log = document.getElementById('execution-log'); |
| const entry = document.createElement('div'); |
| entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`; |
| entry.className = 'typing-cursor'; |
| log.appendChild(entry); |
| log.scrollTop = log.scrollHeight; |
| |
| setTimeout(() => entry.classList.remove('typing-cursor'), 1000); |
| } |
| |
| function sleep(ms) { |
| return new Promise(resolve => setTimeout(resolve, ms)); |
| } |
| |
| |
| let demoRunning = false; |
| let demoInterval; |
| let currentTask = 0; |
| const totalDemoTime = 45000; |
| |
| 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 toggleDashboardDemo() { |
| if (demoRunning) { |
| pauseDashboardDemo(); |
| } else { |
| 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}%`; |
| |
| |
| 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')}`; |
| |
| |
| agentTasks.forEach((task, index) => { |
| if (elapsed >= task.time && !task.shown) { |
| task.shown = true; |
| showAgentTask(task, index); |
| updateAgentStatus(task); |
| } |
| }); |
| |
| if (elapsed >= totalDemoTime) { |
| pauseDashboardDemo(); |
| |
| 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 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); |
| |
| |
| setTimeout(() => { |
| taskEl.classList.remove('translate-y-4', 'opacity-0'); |
| }, 50); |
| |
| |
| while (feed.children.length > 5) { |
| feed.removeChild(feed.lastChild); |
| } |
| |
| lucide.createIcons(); |
| } |
| |
| function updateAgentStatus(task) { |
| const statusText = document.getElementById('agent-status-text'); |
| statusText.textContent = `${task.agent} is ${task.action.toLowerCase()}...`; |
| |
| |
| const indicator = document.querySelector('.bg-violet-400'); |
| if (indicator) { |
| indicator.classList.remove('animate-pulse'); |
| void indicator.offsetWidth; |
| indicator.classList.add('animate-pulse'); |
| } |
| } |
| |
| function seekDashboardDemo(e) { |
| |
| const rect = e.currentTarget.getBoundingClientRect(); |
| const pos = (e.clientX - rect.left) / rect.width; |
| document.getElementById('dashboard-progress').style.width = `${pos * 100}%`; |
| } |
| |
| 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 switchTab(tab) { |
| document.querySelectorAll('.feature-tab').forEach(t => t.classList.remove('active')); |
| document.getElementById(`tab-${tab}`).classList.add('active'); |
| |
| document.querySelectorAll('.demo-screen').forEach(s => s.classList.add('hidden')); |
| document.getElementById(`screen-${tab}`).classList.remove('hidden'); |
| } |
| |
| function scrollToDemo() { |
| document.getElementById('prototype').scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| |
| function animateStats() { |
| const stats = [ |
| { id: 'stat-workflows', target: 125000, suffix: '+' }, |
| { id: 'stat-tasks', target: 5000000, suffix: '+' }, |
| { id: 'stat-hours', target: 850000, suffix: 'K' }, |
| { id: 'stat-teams', target: 2500, suffix: '+' } |
| ]; |
| |
| stats.forEach(stat => { |
| const element = document.getElementById(stat.id); |
| let current = 0; |
| const increment = stat.target / 100; |
| const timer = setInterval(() => { |
| current += increment; |
| if (current >= stat.target) { |
| current = stat.target; |
| clearInterval(timer); |
| } |
| element.textContent = Math.floor(current).toLocaleString() + stat.suffix; |
| }, 20); |
| }); |
| } |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| animateStats(); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }); |
| |
| observer.observe(document.getElementById('stat-workflows')); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
