refactored single html into js, css

index.js

@@ -0,0 +1,51 @@
+
+// Store
+const overlay = document.getElementById('storeOverlay');
+function openStore(e) { if (e) e.preventDefault(); overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }
+function closeStore() { overlay.classList.remove('active'); document.body.style.overflow = ''; }
+document.getElementById('storeNavBtn').addEventListener('click', openStore);
+document.getElementById('storeMobileBtn').addEventListener('click', openStore);
+document.getElementById('heroCta').addEventListener('click', openStore);
+document.getElementById('storeClose').addEventListener('click', closeStore);
+overlay.addEventListener('click', function (e) { if (e.target === overlay) closeStore(); });
+document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && overlay.classList.contains('active')) closeStore(); });
+
+// Hamburger
+const hamburger = document.getElementById('hamburger'), mobileMenu = document.getElementById('mobileMenu');
+hamburger.addEventListener('click', function () { hamburger.classList.toggle('open'); mobileMenu.classList.toggle('open'); });
+document.querySelectorAll('.mobile-nav-link').forEach(function (a) { a.addEventListener('click', function () { hamburger.classList.remove('open'); mobileMenu.classList.remove('open'); }); });
+
+// Scroll reveal
+const observer = new IntersectionObserver(function (entries) {
+  entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
+}, { threshold: 0.1 });
+document.querySelectorAll('.reveal').forEach(function (el) { observer.observe(el); });
+
+// Active nav
+const secObs = new IntersectionObserver(function (entries) {
+  entries.forEach(function (e) { if (e.isIntersecting) { const id = e.target.id; document.querySelectorAll('.nav-links a[data-section]').forEach(function (a) { a.classList.toggle('active', a.dataset.section === id); }); } });
+}, { rootMargin: '-40% 0px -55% 0px' });
+['home', 'about', 'faq', 'contact'].forEach(function (id) { const el = document.getElementById(id); if (el) secObs.observe(el); });
+
+// FAQ card accordion
+document.querySelectorAll('.faq-card-q').forEach(function (btn) {
+  btn.addEventListener('click', function () {
+    const card = this.closest('.faq-card');
+    const isOpen = card.classList.contains('open');
+    document.querySelectorAll('.faq-card.open').forEach(function (c) { c.classList.remove('open'); });
+    if (!isOpen) card.classList.add('open');
+  });
+});
+
+// Contact form
+document.getElementById('contactForm').addEventListener('submit', function (e) {
+  e.preventDefault();
+  const btn = this.querySelector('.form-submit');
+  btn.textContent = 'Message Sent ✓'; btn.style.background = 'var(--green)'; btn.style.borderColor = 'var(--green)'; btn.style.color = '#000';
+  setTimeout(function () { btn.textContent = 'Send It ↗'; btn.style.background = btn.style.borderColor = btn.style.color = ''; }, 3000);
+});
+
+// 3D cube float
+const cube = document.getElementById('cube3d'); let t = 0;
+function floatCube() { t += 0.012; cube.style.marginTop = (Math.sin(t) * 12) + 'px'; requestAnimationFrame(floatCube); }
+floatCube();