DouglasMaclei/dubem-pharma-express-ipatinga
0
1// Dubem Pharma Express - Main JavaScript2 3document.addEventListener('DOMContentLoaded', function() {4 5 // Preloader6 setTimeout(() => {7 const preloader = document.getElementById('preloader');8 if (preloader) {9 preloader.classList.add('fade-out');10 setTimeout(() => {11 preloader.style.display = 'none';12 }, 500);13 }14 }, 1000);15 16 // Step animation on scroll17 const stepItems = document.querySelectorAll('.step-item');18 const progressLine = document.getElementById('progress-line');19 20 const observerOptions = {21 threshold: 0.5,22 rootMargin: '0px'23 };24 25 const stepObserver = new IntersectionObserver((entries) => {26 entries.forEach((entry, index) => {27 if (entry.isIntersecting) {28 // Animate steps29 stepItems.forEach((item, i) => {30 setTimeout(() => {31 item.classList.add('active');32 if (i < stepItems.length - 1) {33 setTimeout(() => {34 item.classList.remove('active');35 item.classList.add('completed');36 }, 500);37 }38 }, i * 300);39 });40 41 // Animate progress line42 if (progressLine) {43 setTimeout(() => {44 progressLine.style.transform = 'scaleX(1)';45 }, 300);46 }47 48 stepObserver.unobserve(entry.target);49 }50 });51 }, observerOptions);52 53 if (stepItems.length > 0) {54 stepObserver.observe(document.getElementById('como-funciona'));55 }56 57 // FAQ interactions58 const faqItems = document.querySelectorAll('.faq-item');59 60 faqItems.forEach(item => {61 const question = item.querySelector('.faq-question');62 const answer = item.querySelector('.faq-answer');63 const icon = question.querySelector('i');64 65 question.addEventListener('click', () => {66 const isActive = item.classList.contains('active');67 68 // Close all FAQ items69 faqItems.forEach(faq => {70 faq.classList.remove('active');71 faq.querySelector('i').style.transform = 'rotate(0deg)';72 });73 74 // Open clicked item if it wasn't active75 if (!isActive) {76 item.classList.add('active');77 icon.style.transform = 'rotate(180deg)';78 }79 });80 });81 82 // Navbar scroll effect83 const navbar = document.querySelector('.navbar');84 let lastScrollTop = 0;85 86 window.addEventListener('scroll', () => {87 const scrollTop = window.pageYOffset || document.documentElement.scrollTop;88 89 if (navbar) {90 if (scrollTop > lastScrollTop && scrollTop > 100) {91 navbar.style.transform = 'translateY(-100%)';92 } else {93 navbar.style.transform = 'translateY(0)';94 }95 96 if (scrollTop > 50) {97 navbar.classList.add('scrolled');98 } else {99 navbar.classList.remove('scrolled');100 }101 }102 103 lastScrollTop = scrollTop;104 });105 106 // Whatsapp tracking (simulated)107 const whatsappLinks = document.querySelectorAll('a[href*="wa.me"]');108 whatsappLinks.forEach(link => {109 link.addEventListener('click', (e) => {110 // Here you would send analytics data111 console.log('WhatsApp click tracked:', link.href);112 113 // Optional: Add UTM parameters for tracking114 const url = new URL(link.href);115 url.searchParams.set('utm_source', 'website');116 url.searchParams.set('utm_medium', 'cta');117 url.searchParams.set('utm_campaign', 'teleentrega');118 link.href = url.toString();119 });120 });121 122 // Form submissions (if any)123 const forms = document.querySelectorAll('form');124 forms.forEach(form => {125 form.addEventListener('submit', (e) => {126 e.preventDefault();127 128 // Simulate form submission129 const button = form.querySelector('button[type="submit"]');130 const originalText = button.innerHTML;131 132 button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin mr-2"></i> Enviando...';133 button.disabled = true;134 135 setTimeout(() => {136 button.innerHTML = '<i data-feather="check" class="w-5 h-5 mr-2"></i> Enviado!';137 setTimeout(() => {138 button.innerHTML = originalText;139 button.disabled = false;140 form.reset();141 }, 2000);142 }, 1500);143 144 feather.replace();145 });146 });147 148 // Lazy load images149 const images = document.querySelectorAll('img[data-src]');150 const imageObserver = new IntersectionObserver((entries, observer) => {151 entries.forEach(entry => {152 if (entry.isIntersecting) {153 const img = entry.target;154 img.src = img.dataset.src;155 img.classList.remove('lazy');156 observer.unobserve(img);157 }158 });159 });160 161 images.forEach(img => imageObserver.observe(img));162 163 // Add smooth reveal animation to elements164 const revealElements = document.querySelectorAll('.reveal');165 const revealObserver = new IntersectionObserver((entries) => {166 entries.forEach(entry => {167 if (entry.isIntersecting) {168 entry.target.classList.add('revealed');169 revealObserver.unobserve(entry.target);170 }171 });172 }, { threshold: 0.1 });173 174 // Initialize reveal animation for new elements175 document.querySelectorAll('.group').forEach(el => {176 el.classList.add('reveal');177 });178 179 document.querySelectorAll('.reveal').forEach(el => {180 revealObserver.observe(el);181 });182 183 // Performance optimization: Debounce scroll events184 function debounce(func, wait) {185 let timeout;186 return function executedFunction(...args) {187 const later = () => {188 clearTimeout(timeout);189 func(...args);190 };191 clearTimeout(timeout);192 timeout = setTimeout(later, wait);193 };194 }195 196 // Add dynamic year to footer197 const currentYear = new Date().getFullYear();198 const yearElements = document.querySelectorAll('.current-year');199 yearElements.forEach(el => {200 el.textContent = currentYear;201 });202 203 // Mobile menu toggle (if needed)204 const mobileMenuButton = document.querySelector('.mobile-menu-button');205 const mobileMenu = document.querySelector('.mobile-menu');206 207 if (mobileMenuButton && mobileMenu) {208 mobileMenuButton.addEventListener('click', () => {209 mobileMenu.classList.toggle('hidden');210 });211 }212 213 console.log('Drogaria Dubem - Site carregado com sucesso! 🚀');214});215 216// Global utility functions217window.DubemUtils = {218 scrollTo: function(elementId) {219 const element = document.getElementById(elementId);220 if (element) {221 element.scrollIntoView({ behavior: 'smooth' });222 }223 },224 225 trackConversion: function(source) {226 // Simulate conversion tracking227 console.log('Conversion tracked from:', source);228 // In real scenario, would send to Google Analytics, Facebook Pixel, etc.229 },230 231 showNotification: function(message, type = 'info') {232 // Simple notification system233 const notification = document.createElement('div');234 notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-[9999] ${235 type === 'success' ? 'bg-green-500' : 236 type === 'error' ? 'bg-red-500' : 'bg-blue-500'237 } text-white transform translate-x-full transition-transform duration-300`;238 notification.textContent = message;239 240 document.body.appendChild(notification);241 242 setTimeout(() => {243 notification.style.transform = 'translateX(0)';244 }, 100);245 246 setTimeout(() => {247 notification.style.transform = 'translateX(full)';248 setTimeout(() => {249 document.body.removeChild(notification);250 }, 300);251 }, 4000);252 }253};