Marquee Demo 2

1import React from "react";
2import { Marquee } from "../ui/marquee";
3import Image from "next/image";
4 
5export default function MarqueeDemo1() {
6  return (
7    <div className="max-w-4xl mx-auto w-full overflow-hidden">
8      <Marquee
9        gap={50}
10        reverse
11        className="flex max-w-4xl mx-auto w-full overflow-hidden"
12      >
13        <Image
14          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/DC.png"
15          alt="DC logo"
16          width={120}
17          height={120}
18          quality={100}
19          loading="lazy"
20          className="h-[120px] w-auto"
21        />
22        <Image
23          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/4942bd6567de80cfbc6d3f5ce8a5a6a156b0d2dc/public/bandai.svg"
24          alt="Bandai logo"
25          width={120}
26          height={120}
27          quality={100}
28          loading="lazy"
29          className="h-[120px] w-auto"
30        />
31        <Image
32          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/disney.png"
33          alt="Disney logo"
34          width={120}
35          height={120}
36          quality={100}
37          loading="lazy"
38          className="h-[120px] w-auto dark:bg-white p-2"
39        />
40        <Image
41          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/4942bd6567de80cfbc6d3f5ce8a5a6a156b0d2dc/public/warnerbros.svg"
42          alt="Warner Bros logo"
43          width={120}
44          height={120}
45          quality={100}
46          loading="lazy"
47          className="h-[120px] w-auto"
48        />
49        <Image
50          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/marvel.png"
51          alt="Marvel logo"
52          width={120}
53          height={120}
54          quality={100}
55          loading="lazy"
56          className="h-[120px] w-auto"
57        />
58      </Marquee>
59    </div>
60  );
61}