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

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!');