"use client"; import { cn } from "@/lib/utils"; import { Marquee } from "@/components/ui/marquee"; const images = [ "https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2", "https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2", "https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2", "https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2", "https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2", "https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2", ]; export function Partners() { return ( <div className="h-screen flex flex-col items-center justify-center space-y-10"> <div className="flex flex-col items-center justify-center space-y-6"> <h1 className="text-white text-4xl">Partners</h1> <div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent"> <Marquee pauseOnHover className="[--duration:20s]"> <div className="flex space-x-6"> {images.map((img, index) => ( <img key={index} src={img} alt={`Avatar ${index + 1}`} className="h-32 w-32 rounded-full object-cover" /> ))} </div> </Marquee> <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div> <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div> </div> </div> <div className="flex flex-col items-center justify-center space-y-6"> <h1 className="text-white text-4xl">Customers</h1> <div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl"> <Marquee reverse pauseOnHover className="[--duration:20s]"> <div className="flex space-x-6"> {images.map((img, index) => ( <img key={index} src={img} alt={`Avatar ${index + 1}`} className="h-32 w-32 rounded-full object-cover" /> ))} </div> </Marquee> <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div> <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div> </div> </div> </div> ); }