feat: Create template

scripts/main.js

@@ -0,0 +1,101 @@
+// Navigation and general functionality
+document.addEventListener("DOMContentLoaded", function () {
+  // Handle contact form submission
+  const contactForm = document.getElementById("contactForm");
+  if (contactForm) {
+    contactForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+
+      // Get form data
+      const formData = new FormData(this);
+      const name = formData.get("name");
+      const email = formData.get("email");
+      const subject = formData.get("subject");
+      const message = formData.get("message");
+
+      // Simple validation
+      if (!name || !email || !subject || !message) {
+        alert("Please fill in all required fields.");
+        return;
+      }
+
+      // Here you would typically send the data to a server
+      // For now, we'll just show a success message
+      alert("Thank you for your message! We'll get back to you soon.");
+      this.reset();
+    });
+  }
+
+  // Add click event to CTA button
+  const ctaButton = document.querySelector(".cta-button");
+  if (ctaButton) {
+    ctaButton.addEventListener("click", function () {
+      alert(
+        "Thank you for your interest! This is where you can add your custom functionality."
+      );
+    });
+  }
+
+  // Add click events to pricing buttons
+  const pricingButtons = document.querySelectorAll(".pricing-btn");
+  pricingButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      alert(
+        "Thank you for your interest! Please contact us to discuss pricing options."
+      );
+    });
+  });
+
+  // Add scroll effect to navigation
+  window.addEventListener("scroll", function () {
+    const header = document.querySelector("header");
+    if (window.scrollY > 100) {
+      header.style.backgroundColor = "rgba(255, 255, 255, 0.95)";
+      header.style.backdropFilter = "blur(10px)";
+    } else {
+      header.style.backgroundColor = "#fff";
+      header.style.backdropFilter = "none";
+    }
+  });
+
+  // Simple animation for sections when they come into view
+  const observerOptions = {
+    threshold: 0.1,
+    rootMargin: "0px 0px -50px 0px",
+  };
+
+  const observer = new IntersectionObserver(function (entries) {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.style.opacity = "1";
+        entry.target.style.transform = "translateY(0)";
+      }
+    });
+  }, observerOptions);
+
+  // Observe all sections
+  const sections = document.querySelectorAll("section");
+  sections.forEach((section) => {
+    section.style.opacity = "0";
+    section.style.transform = "translateY(20px)";
+    section.style.transition = "opacity 0.6s ease, transform 0.6s ease";
+    observer.observe(section);
+  });
+});
+
+// Add current year to footer
+document.addEventListener("DOMContentLoaded", function () {
+  // Update year in both old and new footer structures
+  const footerYear = document.getElementById("year");
+  if (footerYear) {
+    const currentYear = new Date().getFullYear();
+    footerYear.textContent = currentYear;
+  }
+
+  // Also update the old footer structure for backward compatibility
+  const footer = document.querySelector("footer p");
+  if (footer) {
+    const currentYear = new Date().getFullYear();
+    footer.innerHTML = footer.innerHTML.replace("2024", currentYear);
+  }
+});