Initial storagebox.fi website

Nextcloud cloud storage service landing page with hero, features,
pricing (5 tiers: Mini to Business), contact form and FAQ section.
Responsive design with colorful gradient theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

script.js

@@ -0,0 +1,69 @@
+// === Navbar scroll effect ===
+const navbar = document.getElementById('navbar');
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+        navbar.classList.add('scrolled');
+    } else {
+        navbar.classList.remove('scrolled');
+    }
+});
+
+// === Mobile nav toggle ===
+const navToggle = document.getElementById('navToggle');
+const navLinks = document.getElementById('navLinks');
+
+navToggle.addEventListener('click', () => {
+    navToggle.classList.toggle('active');
+    navLinks.classList.toggle('active');
+});
+
+// Close mobile nav on link click
+navLinks.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => {
+        navToggle.classList.remove('active');
+        navLinks.classList.remove('active');
+    });
+});
+
+// === Scroll animations (Intersection Observer) ===
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+            observer.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+
+// Add fade-in class to animatable elements
+document.querySelectorAll('.feature-card, .pricing-card, .contact-info-card, .section-title, .section-subtitle').forEach(el => {
+    el.classList.add('fade-in');
+    observer.observe(el);
+});
+
+// === Contact form ===
+const contactForm = document.getElementById('contactForm');
+const formStatus = document.getElementById('formStatus');
+
+contactForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(contactForm);
+    const data = Object.fromEntries(formData);
+
+    // For now, show success message (backend can be added later)
+    formStatus.className = 'form-status success';
+    formStatus.textContent = 'Kiitos viestistäsi! Palaamme asiaan mahdollisimman pian.';
+
+    contactForm.reset();
+
+    setTimeout(() => {
+        formStatus.className = 'form-status';
+    }, 5000);
+});