Logo Cloud 3

1"use client";
2 
3import type React from "react";
4import {
5  Canpoy,
6  Canva,
7  Casetext,
8  Clearbit,
9  Descript,
10  Duolingo,
11  Faire,
12  Strava,
13} from "@/components/smoothui/shared";
14 
15export interface LogoMarqueeProps {
16  description?: string;
17  direction?: "left" | "right";
18  logos?: Array<{
19    name: string;
20    logo: React.ReactNode;
21  }>;
22  pauseOnHover?: boolean;
23  speed?: "slow" | "normal" | "fast";
24  title?: string;
25}
26 
27const DEFAULT_LOGOS = [
28  { logo: <Canpoy />, name: "Canpoy" },
29  { logo: <Canva />, name: "Canva" },
30  { logo: <Casetext />, name: "Casetext" },
31  { logo: <Strava />, name: "Strava" },
32  { logo: <Descript />, name: "Descript" },
33  { logo: <Duolingo />, name: "Duolingo" },
34  { logo: <Faire />, name: "Faire" },
35  { logo: <Clearbit />, name: "Clearbit" },
36];
37 
38const SPEED_MAP = {
39  fast: "20s",
40  normal: "40s",
41  slow: "60s",
42};
43 
44export function LogoMarquee({
45  title = "Trusted by industry leaders",
46  description = "Join thousands of companies already using our platform",
47  logos = DEFAULT_LOGOS,
48  speed = "normal",
49  direction = "left",
50  pauseOnHover = true,
51}: LogoMarqueeProps) {
52  const animationDuration = SPEED_MAP[speed];
53  const animationDirection = direction === "right" ? "reverse" : "normal";
54 
55  return (
56    <section className="overflow-hidden py-20">
57      <style>
58        {`
59          @keyframes marquee-scroll {
60            from {
61              transform: translateX(0);
62            }
63            to {
64              transform: translateX(-50%);
65            }
66          }
67 
68          .marquee-track {
69            animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
70            animation-direction: var(--marquee-direction, normal);
71          }
72 
73          .marquee-container:hover .marquee-track {
74            animation-play-state: var(--marquee-pause-on-hover, running);
75          }
76 
77          @media (prefers-reduced-motion: reduce) {
78            .marquee-track {
79              animation: none;
80            }
81          }
82        `}
83      </style>
84      <div className="mx-auto max-w-7xl px-6">
85        <div className="mb-12 text-center">
86          <h2 className="mb-4 font-bold text-2xl text-foreground lg:text-3xl">
87            {title}
88          </h2>
89          <p className="text-foreground/70 text-lg">{description}</p>
90        </div>
91 
92        <div
93          className="marquee-container relative overflow-hidden"
94          style={{
95            maskImage:
96// … truncated