Upload app.js

js/app.js

@@ -0,0 +1,494 @@
+/**
+ * ═══════════════════════════════════════════════════════════
+ * SOFTEDGE CORPORATION - APP.JS
+ * Sistema completo de interações e animações
+ * Versão: 2.0 - Ultra Moderno (2025)
+ * ═══════════════════════════════════════════════════════════
+ */
+
+// ═══════════════════════════════════════════════════════════
+// 🎯 INICIALIZAÇÃO PRINCIPAL
+// ═══════════════════════════════════════════════════════════
+class SoftEdgeApp {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Esperar DOM estar pronto
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => this.start());
+    } else {
+      this.start();
+    }
+  }
+
+  start() {
+    console.log('%c🚀 SoftEdge Corporation', 'font-size: 20px; color: #06b6d4; font-weight: bold;');
+    console.log('%cWebsite carregado com sucesso!', 'color: #10b981;');
+    
+    // Inicializar todos os módulos
+    this.initLucideIcons();
+    this.initSmoothScroll();
+    this.initScrollAnimations();
+    this.initParallaxEffects();
+    this.initTypewriterEffect();
+    this.initCursorEffect();
+    this.initLazyLoading();
+    this.initDarkMode();
+    this.initPerformanceMonitor();
+    this.initProgressBar();
+    this.initBackToTop();
+    this.initFormEnhancements();
+    this.initNavigationEffects();
+    this.initPreloader();
+    this.initKeyboardShortcuts();
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🎨 ÍCONES LUCIDE
+  // ═══════════════════════════════════════════════════════════
+  initLucideIcons() {
+    if (typeof lucide !== 'undefined') {
+      lucide.createIcons();
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🎢 SMOOTH SCROLL (Nativo, sem bibliotecas)
+  // ═══════════════════════════════════════════════════════════
+  initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', (e) => {
+        const href = anchor.getAttribute('href');
+        if (href === '#') return;
+        
+        e.preventDefault();
+        const target = document.querySelector(href);
+        
+        if (target) {
+          const headerHeight = document.querySelector('header')?.offsetHeight || 0;
+          const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
+          
+          window.scrollTo({
+            top: targetPosition,
+            behavior: 'smooth'
+          });
+        }
+      });
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ✨ ANIMAÇÕES NO SCROLL (Intersection Observer)
+  // ═══════════════════════════════════════════════════════════
+  initScrollAnimations() {
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry, index) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            entry.target.classList.add('animate-in');
+          }, index * 100); // Efeito cascata
+          observer.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+
+    // Observar elementos com classes específicas
+    const animateElements = document.querySelectorAll(`
+      section, 
+      .card, 
+      .group, 
+      .project-card, 
+      .service-card,
+      h1, h2, h3,
+      p:not(footer p)
+    `);
+
+    animateElements.forEach((el) => {
+      el.classList.add('will-animate');
+      observer.observe(el);
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🌊 EFEITO PARALLAX
+  // ═══════════════════════���═══════════════════════════════════
+  initParallaxEffects() {
+    let ticking = false;
+
+    const parallaxElements = document.querySelectorAll('[data-parallax]');
+    
+    if (parallaxElements.length === 0) return;
+
+    window.addEventListener('scroll', () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const scrolled = window.pageYOffset;
+          
+          parallaxElements.forEach((el) => {
+            const speed = parseFloat(el.dataset.parallax) || 0.5;
+            const yPos = -(scrolled * speed);
+            el.style.transform = `translate3d(0, ${yPos}px, 0)`;
+          });
+          
+          ticking = false;
+        });
+        ticking = true;
+      }
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ⌨️ EFEITO TYPEWRITER (Máquina de escrever)
+  // ═══════════════════════════════════════════════════════════
+  initTypewriterEffect() {
+    const typewriterElements = document.querySelectorAll('[data-typewriter]');
+    
+    typewriterElements.forEach((element) => {
+      const text = element.textContent;
+      const speed = parseInt(element.dataset.typewriterSpeed) || 50;
+      element.textContent = '';
+      element.style.opacity = '1';
+      
+      let index = 0;
+      const type = () => {
+        if (index < text.length) {
+          element.textContent += text.charAt(index);
+          index++;
+          setTimeout(type, speed);
+        }
+      };
+      
+      // Iniciar quando o elemento estiver visível
+      const observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          type();
+          observer.disconnect();
+        }
+      });
+      observer.observe(element);
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🖱️ CURSOR CUSTOMIZADO
+  // ═══════════════════════════════════════════════════════════
+  initCursorEffect() {
+    // Apenas em desktop
+    if (window.matchMedia('(pointer: coarse)').matches) return;
+
+    const cursor = document.createElement('div');
+    cursor.className = 'custom-cursor';
+    document.body.appendChild(cursor);
+
+    const cursorFollower = document.createElement('div');
+    cursorFollower.className = 'custom-cursor-follower';
+    document.body.appendChild(cursorFollower);
+
+    let mouseX = 0, mouseY = 0;
+    let cursorX = 0, cursorY = 0;
+    let followerX = 0, followerY = 0;
+
+    document.addEventListener('mousemove', (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    });
+
+    const animateCursor = () => {
+      // Cursor principal (rápido)
+      cursorX += (mouseX - cursorX) * 0.3;
+      cursorY += (mouseY - cursorY) * 0.3;
+      cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
+
+      // Cursor follower (mais lento)
+      followerX += (mouseX - followerX) * 0.1;
+      followerY += (mouseY - followerY) * 0.1;
+      cursorFollower.style.transform = `translate(${followerX}px, ${followerY}px)`;
+
+      requestAnimationFrame(animateCursor);
+    };
+    animateCursor();
+
+    // Efeitos em elementos clicáveis
+    document.querySelectorAll('a, button, [role="button"]').forEach((el) => {
+      el.addEventListener('mouseenter', () => {
+        cursor.classList.add('cursor-hover');
+        cursorFollower.classList.add('cursor-hover');
+      });
+      el.addEventListener('mouseleave', () => {
+        cursor.classList.remove('cursor-hover');
+        cursorFollower.classList.remove('cursor-hover');
+      });
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🖼️ LAZY LOADING DE IMAGENS
+  // ═══════════════════════════════════════════════════════════
+  initLazyLoading() {
+    const images = document.querySelectorAll('img[data-src]');
+    
+    const imageObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const img = entry.target;
+          img.src = img.dataset.src;
+          img.removeAttribute('data-src');
+          img.classList.add('loaded');
+          imageObserver.unobserve(img);
+        }
+      });
+    });
+
+    images.forEach((img) => imageObserver.observe(img));
+  }
+
+  // ════════════���══════════════════════════════════════════════
+  // 🌙 DARK MODE AVANÇADO
+  // ═══════════════════════════════════════════════════════════
+  initDarkMode() {
+    const darkModeToggle = document.createElement('button');
+    darkModeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
+    darkModeToggle.className = 'fixed bottom-6 right-6 z-50 w-12 h-12 bg-slate-900/80 backdrop-blur-xl border border-white/10 text-white rounded-full shadow-lg hover:scale-110 transition-all duration-300 flex items-center justify-center';
+    darkModeToggle.setAttribute('aria-label', 'Toggle Dark Mode');
+    darkModeToggle.setAttribute('title', 'Alternar modo escuro');
+    document.body.appendChild(darkModeToggle);
+
+    // Verificar preferência salva
+    const currentTheme = localStorage.getItem('theme');
+    if (currentTheme === 'light' || 
+        (!currentTheme && window.matchMedia('(prefers-color-scheme: light)').matches)) {
+      document.documentElement.classList.add('light-mode');
+      darkModeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>';
+    }
+
+    darkModeToggle.addEventListener('click', () => {
+      document.documentElement.classList.toggle('light-mode');
+      const isLight = document.documentElement.classList.contains('light-mode');
+      
+      localStorage.setItem('theme', isLight ? 'light' : 'dark');
+      darkModeToggle.innerHTML = isLight 
+        ? '<i data-lucide="sun" class="w-5 h-5"></i>'
+        : '<i data-lucide="moon" class="w-5 h-5"></i>';
+      
+      lucide.createIcons();
+      
+      // Animação de transição
+      document.body.style.transition = 'background-color 0.3s ease';
+    });
+
+    lucide.createIcons();
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 📊 MONITOR DE PERFORMANCE
+  // ═══════════════════════════════════════════════════════════
+  initPerformanceMonitor() {
+    if ('performance' in window) {
+      window.addEventListener('load', () => {
+        setTimeout(() => {
+          const perfData = performance.getEntriesByType('navigation')[0];
+          const loadTime = perfData.loadEventEnd - perfData.fetchStart;
+          
+          console.log(`%c⚡ Performance`, 'color: #f59e0b; font-weight: bold;');
+          console.log(`Tempo de carregamento: ${(loadTime / 1000).toFixed(2)}s`);
+          
+          // Mostrar notificação se o site carregar rápido
+          if (loadTime < 1500) {
+            this.showNotification('⚡ Site carregado em menos de 1.5s!', 'success');
+          }
+        }, 0);
+      });
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 📈 BARRA DE PROGRESSO DE LEITURA
+  // ═══════════════════════════════════════════════════════════
+  initProgressBar() {
+    const progressBar = document.createElement('div');
+    progressBar.className = 'reading-progress-bar';
+    document.body.appendChild(progressBar);
+
+    window.addEventListener('scroll', () => {
+      const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (window.scrollY / windowHeight) * 100;
+      progressBar.style.width = `${scrolled}%`;
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ⬆️ BOTÃO VOLTAR AO TOPO
+  // ═══════════════════════════════════════════════════════════
+  initBackToTop() {
+    const backToTop = document.createElement('button');
+    backToTop.innerHTML = '<i data-lucide="arrow-up" class="w-5 h-5"></i>';
+    backToTop.className = 'back-to-top fixed bottom-6 left-6 z-50 w-12 h-12 bg-cyan-500 text-white rounded-full shadow-lg opacity-0 invisible transition-all duration-300 flex items-center justify-center hover:scale-110';
+    backToTop.setAttribute('aria-label', 'Voltar ao topo');
+    document.body.appendChild(backToTop);
+
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 500) {
+        backToTop.classList.remove('opacity-0', 'invisible');
+      } else {
+        backToTop.classList.add('opacity-0', 'invisible');
+      }
+    });
+
+    backToTop.addEventListener('click', () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    });
+
+    lucide.createIcons();
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 📝 MELHORIAS EM FORMULÁRIOS
+  // ═══════════════════════════════════════════════════════════
+  initFormEnhancements() {
+    // Auto-resize para textareas
+    document.querySelectorAll('textarea').forEach((textarea) => {
+      textarea.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = this.scrollHeight + 'px';
+      });
+    });
+
+    // Validação em tempo real
+    document.querySelectorAll('input[type="email"]').forEach((input) => {
+      input.addEventListener('blur', function() {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (this.value && !emailRegex.test(this.value)) {
+          this.classList.add('border-red-500');
+          this.classList.remove('border-cyan-500');
+        } else if (this.value) {
+          this.classList.add('border-cyan-500');
+          this.classList.remove('border-red-500');
+        }
+      });
+    });
+
+    // Contador de caracteres para textareas
+    document.querySelectorAll('textarea[maxlength]').forEach((textarea) => {
+      const maxLength = textarea.getAttribute('maxlength');
+      const counter = document.createElement('div');
+      counter.className = 'text-sm text-gray-400 mt-2 text-right';
+      textarea.parentNode.appendChild(counter);
+
+      const updateCounter = () => {
+        const remaining = maxLength - textarea.value.length;
+        counter.textContent = `${remaining} caracteres restantes`;
+        if (remaining < 50) {
+          counter.classList.add('text-orange-400');
+        } else {
+          counter.classList.remove('text-orange-400');
+        }
+      };
+
+      textarea.addEventListener('input', updateCounter);
+      updateCounter();
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🧭 EFEITOS DE NAVEGAÇÃO
+  // ═══════════════════════════════════════════════════════════
+  initNavigationEffects() {
+    const header = document.querySelector('header');
+    if (!header) return;
+
+    let lastScroll = 0;
+
+    window.addEventListener('scroll', () => {
+      const currentScroll = window.pageYOffset;
+
+      // Adicionar sombra ao rolar
+      if (currentScroll > 50) {
+        header.classList.add('shadow-lg');
+      } else {
+        header.classList.remove('shadow-lg');
+      }
+
+      // Esconder header ao rolar para baixo (opcional)
+      // if (currentScroll > lastScroll && currentScroll > 500) {
+      //   header.style.transform = 'translateY(-100%)';
+      // } else {
+      //   header.style.transform = 'translateY(0)';
+      // }
+
+      lastScroll = currentScroll;
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ⏳ PRELOADER
+  // ═══════════════════════════════════════════════════════════
+  initPreloader() {
+    const preloader = document.querySelector('.preloader');
+    if (!preloader) return;
+
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        preloader.classList.add('fade-out');
+        setTimeout(() => {
+          preloader.remove();
+        }, 500);
+      }, 300);
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ⌨️ ATALHOS DE TECLADO
+  // ═══════════════════════════════════════════════════════════
+  initKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+      // Ctrl/Cmd + K = Abrir menu de busca (se existir)
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        console.log('Busca ativada (Ctrl/Cmd + K)');
+      }
+
+      // Escape = Fechar modais
+      if (e.key === 'Escape') {
+        document.querySelectorAll('.modal.active, .dropdown.open').forEach((el) => {
+          el.classList.remove('active', 'open');
+        });
+      }
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // 🔔 SISTEMA DE NOTIFICAÇÕES
+  // ═══════════════════════════════════════════════════════════
+  showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => notification.classList.add('show'), 10);
+    setTimeout(() => {
+      notification.classList.remove('show');
+      setTimeout(() => notification.remove(), 300);
+    }, 3000);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════
+// 🚀 INICIALIZAR APP
+// ═══════════════════════════════════════════════════════════
+const app = new SoftEdgeApp();
+
+// ═══════════════════════════════════════════════════════════
+// 🎨 EXPORTAR PARA USO GLOBAL (se necessário)
+// ═══════════════════════════════════════════════════════════
+window.SoftEdgeApp = app;