marquee-stacked-demo

1"use client"
2 
3import { Marquee } from "@/components/ui/marquee"
4 
5const brands = [
6  {
7    name: "Google",
8    logo: "/images/brands/google.svg",
9    alt: "Google logo",
10  },
11  {
12    name: "Anthropic",
13    logo: "/images/brands/anthropic.svg",
14    alt: "Anthropic logo",
15  },
16  {
17    name: "Microsoft",
18    logo: "/images/brands/microsoft.svg",
19    alt: "Microsoft logo",
20  },
21  {
22    name: "Apple",
23    logo: "/images/brands/apple.svg",
24    alt: "Apple logo",
25  },
26  {
27    name: "NVIDIA",
28    logo: "/images/brands/nvidia.svg",
29    alt: "NVIDIA logo",
30  },
31]
32 
33export default function MarqueeStackedDemo() {
34  return (
35    <div className="w-full space-y-8 py-12">
36      {/* Top row - moving right to left */}
37      <Marquee direction="left" speed={25} className="py-4">
38        {brands.map((brand) => (
39          <img
40            key={brand.name}
41            src={brand.logo || "/placeholder.svg"}
42            alt={brand.alt || brand.name}
43            className="h-full w-auto object-contain"
44            loading="lazy"
45          />
46        ))}
47      </Marquee>
48 
49      {/* Bottom row - moving left to right */}
50      <Marquee direction="right" speed={30} className="py-4">
51        {brands.map((brand) => (
52          <img
53            key={brand.name}
54            src={brand.logo || "/placeholder.svg"}
55            alt={brand.alt || brand.name}
56            className="h-full w-auto object-contain"
57            loading="lazy"
58          />
59        ))}
60      </Marquee>
61    </div>
62  )
63}