View on GitHub

Explore Different Types of AI Chatbots

Why Specialized Chatbots?

Most websites use generic chatbots that try to handle everything. But different types of businesses have different visitor needs.

đŸŽ¯

Context Understanding

Specialized bots understand their domain better

💡

Better User Experience

Users get relevant answers faster

âš™ī¸

Purpose-Built Design

Interface matches the intended use case

🤖
How can I help with your shopping today?
Looking for winter jackets
đŸ›ī¸
Great! I can show you our winter collection. What's your preferred style and budget range?
orb.style.animationDelay = `${index * 2}s`; }); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); const animateElements = document.querySelectorAll('.bot-card, .point, .section-title'); animateElements.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'all 0.6s ease'; observer.observe(el); 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' }); } }); }); window.addEventListener('scroll', () => { const nav = document.querySelector('.nav'); if (window.scrollY > 100) { nav.style.background = 'rgba(10, 10, 15, 0.9)'; nav.style.backdropFilter = 'blur(10px)'; nav.style.borderBottom = '1px solid rgba(255, 255, 255, 0.1)'; } else { nav.style.background = 'transparent'; nav.style.backdropFilter = 'none'; nav.style.borderBottom = 'none'; } }); } function initializeBotCards() { const botCards = document.querySelectorAll('.bot-card'); botCards.forEach(card => { // Enhanced hover effects card.addEventListener('mouseenter', () => { card.style.transform = 'translateY(-8px) scale(1.02)'; // Start demo message animations const demoMessages = card.querySelectorAll('.demo-message'); demoMessages.forEach((msg, index) => { setTimeout(() => { msg.style.opacity = '1'; msg.style.transform = 'translateY(0)'; }, index * 400 + 200); }); }); card.addEventListener('mouseleave', () => { card.style.transform = 'translateY(0) scale(1)'; // Reset demo message animations const demoMessages = card.querySelectorAll('.demo-message'); demoMessages.forEach(msg => { msg.style.opacity = '0'; msg.style.transform = 'translateY(20px)'; }); }); // Mobile tap support for previews card.addEventListener('click', (e) => { // Don't trigger preview if clicking on links or buttons if (e.target.classList.contains('bot-link') || e.target.classList.contains('try-button') || e.target.closest('.bot-link') || e.target.closest('.try-button')) { return; } // On mobile, toggle preview on tap if (window.innerWidth <= 768) { e.preventDefault(); card.classList.toggle('mobile-preview'); // Animate demo messages for mobile if (card.classList.contains('mobile-preview')) { const demoMessages = card.querySelectorAll('.demo-message'); demoMessages.forEach((msg, index) => { setTimeout(() => { msg.style.opacity = '1'; msg.style.transform = 'translateY(0)'; }, index * 300); }); } else { const demoMessages = card.querySelectorAll('.demo-message'); demoMessages.forEach(msg => { msg.style.opacity = '0'; msg.style.transform = 'translateY(20px)'; }); } } else { // Desktop behavior - go to bot page const link = card.querySelector('.bot-link'); if (link) { window.location.href = link.href; } } }); // Initialize demo message states const demoMessages = card.querySelectorAll('.demo-message'); demoMessages.forEach(msg => { msg.style.opacity = '0'; msg.style.transform = 'translateY(20px)'; msg.style.transition = 'all 0.6s ease'; }); }); // Close mobile previews when clicking outside document.addEventListener('click', (e) => { if (!e.target.closest('.bot-card')) { const mobileCards = document.querySelectorAll('.bot-card.mobile-preview'); mobileCards.forEach(card => { card.classList.remove('mobile-preview'); const demoMessages = card.querySelectorAll('.demo-message'); demoMessages.forEach(msg => { msg.style.opacity = '0'; msg.style.transform = 'translateY(20px)'; }); }); } // Pause animation on hover const modelsTrack = document.querySelector('.models-track'); if (modelsTrack) { modelsTrack.addEventListener('mouseenter', () => { modelsTrack.style.animationPlayState = 'paused'; }); modelsTrack.addEventListener('mouseleave', () => { modelsTrack.style.animationPlayState = 'running'; }); } // Add click tracking for model badges const modelBadges = document.querySelectorAll('.model-badge'); modelBadges.forEach(badge => { badge.addEventListener('click', () => { console.log('Model clicked:', badge.textContent.trim()); // Could add analytics or navigation here }); });