<.marquee gap="5rem">
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
    alt="Google"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg"
    alt="Microsoft"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg"
    alt="Apple"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
    alt="Netflix"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg"
    alt="IBM"
    class="h-10"
  />
</.marquee>

        

          <.marquee pause_on_hover repeat={3}>
  <.review_card
    name="Anne"
    username="@anne"
    body="I've never seen anything like this before. It's amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
  />
  <.review_card
    name="Jill"
    username="@jill"
    body="I don't know what to say. I'm speechless. This is amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
  />
  <.review_card
    name="John"
    username="@john"
    body="I'm at a loss for words. This is amazing. I love it."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
  />
</.marquee>

        

          <div class="flex gap-5 my-12">
<.marquee vertical max_height="2xl" reverse duration="20s" pause_on_hover repeat={4}>
  <.review_card
    name="Anne"
    username="@anne"
    body="I've never seen anything like this before. It's amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
  />
  <.review_card
    name="Jill"
    username="@jill"
    body="I don't know what to say. I'm speechless. This is amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
  />
  <.review_card
    name="John"
    username="@john"
    body="I'm at a loss for words. This is amazing. I love it."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
  />
</.marquee>

<.marquee
  vertical
  class="hidden lg:flex"
  max_height="2xl"
  duration="20s"
  pause_on_hover
  repeat={4}
>
  <.review_card
    name="Anne"
    username="@anne"
    body="I've never seen anything like this before. It's amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
  />
  <.review_card
    name="Jill"
    username="@jill"
    body="I don't know what to say. I'm speechless. This is amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
  />
  <.review_card
    name="John"
    username="@john"
    body="I'm at a loss for words. This is amazing. I love it."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
  />
</.marquee>
</div>

        

          <.marquee pause_on_hover repeat={5}>
  <.icon name="hero-academic-cap" class="w-10 h-10 text-blue-500" />
  <.icon name="hero-adjustments-horizontal" class="w-10 h-10 text-green-500" />
  <.icon name="hero-bolt" class="w-10 h-10 text-yellow-500" />
  <.icon name="hero-heart" class="w-10 h-10 text-red-500" />
  <.icon name="hero-musical-note" class="w-10 h-10 text-purple-500" />
</.marquee>

        

          attr(:pause_on_hover, :boolean, default: false, doc: "Pause the marquee when the user hovers over the cards")
attr(:repeat, :integer, default: 4, doc: "Number of times to repeat the content")
attr(:vertical, :boolean, default: false, doc: "Display the marquee vertically")
attr(:reverse, :boolean, default: false, doc: "Reverse the direction of the marquee")
attr(:duration, :string, default: "30s", doc: "Animation duration")
attr(:gap, :string, default: "1rem", doc: "Gap between items")
attr(:overlay_gradient, :boolean, default: true, doc: "Add gradient overlay at edges")
attr(:max_width, :string, default: "none", values: ["sm", "md", "lg", "xl", "2xl", "none"], doc: "Maximum width of the marquee container")
attr(:max_height, :string, default: "none", values: ["sm", "md", "lg", "xl", "2xl", "none"], doc: "Maximum height of the marquee container")
attr(:class, :string, default: "", doc: "CSS class for parent div")
attr(:rest, :global)
slot(:inner_block, required: true)