feat: new public website

apps/public/src/components/infinite-moving-cards.tsx

@@ -0,0 +1,99 @@
+// Thank you: https://ui.aceternity.com/components/infinite-moving-cards
+
+import { cn } from '@/lib/utils';
+import React, { useEffect, useState } from 'react';
+
+export const InfiniteMovingCards = <T,>({
+  items,
+  direction = 'left',
+  speed = 'fast',
+  pauseOnHover = true,
+  className,
+  renderItem,
+}: {
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  direction?: 'left' | 'right';
+  speed?: 'fast' | 'normal' | 'slow';
+  pauseOnHover?: boolean;
+  className?: string;
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const scrollerRef = React.useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    addAnimation();
+  }, []);
+
+  const [start, setStart] = useState(false);
+  function addAnimation() {
+    if (containerRef.current && scrollerRef.current) {
+      const scrollerContent = Array.from(scrollerRef.current.children);
+
+      scrollerContent.forEach((item) => {
+        const duplicatedItem = item.cloneNode(true);
+        if (scrollerRef.current) {
+          scrollerRef.current.appendChild(duplicatedItem);
+        }
+      });
+
+      getDirection();
+      getSpeed();
+      setStart(true);
+    }
+  }
+  const getDirection = () => {
+    if (containerRef.current) {
+      if (direction === 'left') {
+        containerRef.current.style.setProperty(
+          '--animation-direction',
+          'forwards',
+        );
+      } else {
+        containerRef.current.style.setProperty(
+          '--animation-direction',
+          'reverse',
+        );
+      }
+    }
+  };
+  const getSpeed = () => {
+    if (containerRef.current) {
+      if (speed === 'fast') {
+        containerRef.current.style.setProperty('--animation-duration', '20s');
+      } else if (speed === 'normal') {
+        containerRef.current.style.setProperty('--animation-duration', '40s');
+      } else {
+        containerRef.current.style.setProperty('--animation-duration', '80s');
+      }
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'scroller relative z-20 overflow-hidden -ml-4 md:-ml-[1200px] w-screen md:w-[calc(100vw+1400px)]',
+        className,
+      )}
+    >
+      <ul
+        ref={scrollerRef}
+        className={cn(
+          'flex min-w-full shrink-0 gap-8 py-4 w-max flex-nowrap items-start',
+          start && 'animate-scroll',
+          pauseOnHover && 'hover:[animation-play-state:paused]',
+        )}
+      >
+        {items.map((item, idx) => (
+          <li
+            className="w-[310px] max-w-full relative shrink-0 md:w-[400px]"
+            key={idx.toString()}
+          >
+            {renderItem(item, idx)}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};