done landing page

components/ui/logo-marquee.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  duration?: string;
+  gap?: string;
+  [key: string]: unknown;
+}
+
+export function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  gap,
+
+  duration = "40s",
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      style={{
+        ["--duration" as string]: duration,
+        ["--gap" as string]: gap, // 👈 dynamic gap applied
+      }}
+      className={cn(
+        "group flex items-center [gap:var(--gap)] overflow-hidden p-2",
+        vertical ? "flex-col" : "flex-row",
+        className
+      )}
+    >
+      {Array.from({ length: repeat }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            "marquee flex shrink-0 justify-around [gap:var(--gap)]",
+            {
+              reverse: reverse, // add reverse direction
+              pause: pauseOnHover, // pause animation on hover
+              "flex-row": !vertical,
+              "flex-col": vertical,
+            }
+          )}
+        >
+          {children}
+        </div>
+      ))}
+    </div>
+  );
+}