feat: update footer layout

Signed-off-by: David Lima <antdavidlima@gmail.com>

Author: AntDavidLima

lang/cs/main.json

@@ -4,18 +4,49 @@ require('aos/dist/aos.css');
 (function () {
   "use strict";
 
-  window.onscroll = function () {
-    // show or hide the back-top-top button
-    const backToTop = document.querySelector(".back-to-top");
-    if (
-      document.body.scrollTop > 50 ||
-      document.documentElement.scrollTop > 50
-    ) {
-      backToTop.style.display = "flex";
-    } else {
-      backToTop.style.display = "none";
+  // Debounce function to improve performance
+  function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+
+  // Show or hide scroll-dependent elements
+  function handleScrollElements() {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const backToTop = document.querySelector("#back-to-top");
+    const footerContact = document.querySelector("#footer-contact");
+    const shouldShow = scrollTop > 50;
+
+    if (backToTop) {
+      if (shouldShow) {
+        backToTop.classList.add("visible");
+        backToTop.setAttribute("aria-hidden", "false");
+      } else {
+        backToTop.classList.remove("visible");
+        backToTop.setAttribute("aria-hidden", "true");
+      }
     }
-  };
+
+    if (footerContact) {
+      if (shouldShow) {
+        footerContact.classList.add("visible");
+        footerContact.setAttribute("aria-hidden", "false");
+      } else {
+        footerContact.classList.remove("visible");
+        footerContact.setAttribute("aria-hidden", "true");
+      }
+    }
+  }
+
+  // Attach scroll handler with debounce
+  window.addEventListener("scroll", debounce(handleScrollElements, 10));
 
   //===== close navbar-collapse when a  clicked
   let navbarToggler = document.querySelector(".navbar-toggler");
@@ -77,7 +108,46 @@ require('aos/dist/aos.css');
     return (-c / 2) * (t * (t - 2) - 1) + b;
   };
 
-  document.querySelector(".back-to-top").onclick = () => {
-    scrollTo(document.documentElement);
-  };
+  // Back to top button functionality
+  const backToTopBtn = document.querySelector(".back-to-top");
+  if (backToTopBtn) {
+    backToTopBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      scrollTo(document.documentElement);
+    });
+
+    // Keyboard support
+    backToTopBtn.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        scrollTo(document.documentElement);
+      }
+    });
+  }
+
+  // Footer contact functionality
+  const footerContact = document.querySelector("#footer-contact");
+  if (footerContact) {
+    const handleContactClick = () => {
+      // Add your contact/sales redirect logic here
+      // For example: window.location.href = '/contact-us' or open a modal
+      const contactLink = footerContact.getAttribute("data-contact-url");
+      if (contactLink) {
+        window.location.href = contactLink;
+      }
+    };
+
+    footerContact.addEventListener("click", handleContactClick);
+
+    // Keyboard support
+    footerContact.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleContactClick();
+      }
+    });
+  }
+
+  // Initialize scroll elements state
+  handleScrollElements();
 })();

lang/en/main.json

@@ -168,12 +168,49 @@ p {
   border-radius: 5px;
   position: fixed;
   right: 30px;
-  bottom: 30px;
+  bottom: 160px;
   z-index: 99;
   color: var(--white);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition: opacity 0.3s ease-in-out, 
+              visibility 0.3s ease-in-out, 
+              transform 0.3s ease-in-out,
+              background 0.3s ease;
+
+  &.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
 
   &:hover {
     color: var(--white);
     background: var(--heading-color);
+    transform: translateY(-2px);
+  }
+
+  &:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+
+  // Responsive design for smaller screens
+  @media (max-width: 576px) {
+    right: 10px;
+    bottom: 100px;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
   }
 }