feat: add Kura and Hyper Compress product pages, redesign site

src/js/landing.ts

@@ -0,0 +1,23 @@
+const revealTargets = document.querySelectorAll<HTMLElement>('.lp-reveal');
+const reducedMotion = window.matchMedia(
+  '(prefers-reduced-motion: reduce)'
+).matches;
+
+if (
+  revealTargets.length > 0 &&
+  !reducedMotion &&
+  'IntersectionObserver' in window
+) {
+  document.documentElement.classList.add('lp-js');
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        entry.target.classList.add('is-in');
+        observer.unobserve(entry.target);
+      }
+    },
+    { rootMargin: '0px 0px -8% 0px', threshold: 0.1 }
+  );
+  revealTargets.forEach((target) => observer.observe(target));
+}

src/js/main.ts

@@ -314,7 +314,11 @@ const init = async () => {
 
     filteredCategories.forEach((category) => {
       const categoryGroup = document.createElement('div');
-      categoryGroup.className = 'category-group col-span-full';
+      const categorySlug = category.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+      categoryGroup.className = `category-group col-span-full is-cat-${categorySlug}`;
 
       const header = document.createElement('button');
       header.className = 'category-header';
@@ -539,6 +543,49 @@ const init = async () => {
     });
   }
 
+  const faqDetails =
+    document.querySelectorAll<HTMLDetailsElement>('details.faq-d');
+  if (
+    faqDetails.length > 0 &&
+    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  ) {
+    faqDetails.forEach((detail) => {
+      const summary = detail.querySelector('summary');
+      const body = detail.querySelector<HTMLElement>('.faq-d-a');
+      if (!summary || !body) return;
+
+      let animation: Animation | null = null;
+
+      summary.addEventListener('click', (event) => {
+        event.preventDefault();
+        animation?.cancel();
+
+        const wasOpen = detail.open;
+        if (!wasOpen) detail.open = true;
+
+        const fullHeight = `${body.scrollHeight}px`;
+        const fullPadding = window.getComputedStyle(body).paddingBottom;
+        const collapsed = { height: '0px', paddingBottom: '0px', opacity: 0 };
+        const expanded = {
+          height: fullHeight,
+          paddingBottom: fullPadding,
+          opacity: 1,
+        };
+
+        body.style.overflow = 'hidden';
+        animation = body.animate(
+          wasOpen ? [expanded, collapsed] : [collapsed, expanded],
+          { duration: 280, easing: 'cubic-bezier(0.2, 0.7, 0.2, 1)' }
+        );
+        animation.onfinish = () => {
+          if (wasOpen) detail.open = false;
+          body.style.overflow = '';
+          animation = null;
+        };
+      });
+    });
+  }
+
   createIcons({ icons });
   console.log('Please share our tool and share the love!');
 

src/js/mobileMenu.ts

@@ -50,4 +50,50 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
+
+  const mobileProductsButton = document.getElementById(
+    'mobile-products-button'
+  );
+  const mobileProductsMenu = document.getElementById('mobile-products-menu');
+
+  if (mobileProductsButton && mobileProductsMenu) {
+    mobileProductsButton.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const isOpen =
+        mobileProductsButton.getAttribute('aria-expanded') === 'true';
+      mobileProductsMenu.hidden = isOpen;
+      mobileProductsButton.setAttribute('aria-expanded', (!isOpen).toString());
+    });
+  }
+
+  const productsButton = document.getElementById('products-menu-button');
+  const productsMenu = document.getElementById('products-menu');
+
+  if (productsButton && productsMenu) {
+    const closeProducts = () => {
+      productsMenu.hidden = true;
+      productsButton.setAttribute('aria-expanded', 'false');
+    };
+
+    productsButton.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const isOpen = productsButton.getAttribute('aria-expanded') === 'true';
+      productsMenu.hidden = isOpen;
+      productsButton.setAttribute('aria-expanded', (!isOpen).toString());
+    });
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as Node;
+      if (!productsMenu.contains(target) && !productsButton.contains(target)) {
+        closeProducts();
+      }
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !productsMenu.hidden) {
+        closeProducts();
+        productsButton.focus();
+      }
+    });
+  }
 });