first commit

html/assets/js/script.js

@@ -0,0 +1,48 @@
+// Header scroll effect
+const mainHeader = document.getElementById('main-header');
+const brandName = document.getElementById('brand-name');
+const navLinks = document.querySelectorAll('.nav-link');
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+        mainHeader.classList.add('glass-effect', 'py-3');
+        mainHeader.classList.remove('py-6');
+        if (brandName) brandName.classList.replace('text-white', 'text-slate-900');
+        navLinks.forEach(link => {
+            link.classList.replace('text-slate-100', 'text-slate-700');
+        });
+    } else {
+        mainHeader.classList.remove('glass-effect', 'py-3');
+        mainHeader.classList.add('py-6');
+        if (brandName) brandName.classList.replace('text-slate-900', 'text-white');
+        navLinks.forEach(link => {
+            link.classList.replace('text-slate-700', 'text-slate-100');
+        });
+    }
+});
+
+// Mobile menu open
+const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+const mobileMenu = document.getElementById('mobile-menu');
+const closeMenuBtn = document.getElementById('close-menu-btn');
+
+if (mobileMenuBtn) {
+    mobileMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.remove('translate-x-full');
+    });
+}
+
+// Mobile menu close
+if (closeMenuBtn) {
+    closeMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.add('translate-x-full');
+    });
+}
+
+// Close on nav link click
+const mobileNavLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
+mobileNavLinks.forEach(link => {
+    link.addEventListener('click', () => {
+        mobileMenu.classList.add('translate-x-full');
+    });
+});