"use client"
import { cn } from "@/lib/utils"
import { FloatingElements } from "@/components/ui/floating-elements"
const logos = [
{
img: "https://cdn.21st.dev/assets/mirror/b5/b582b58b16d2b3fc181e168fca1688a2e3251b49c0bd22414e77f293cd7f657a.jpg",
link: "#",
bgColor: "bg-[#0f0f10]",
},
{
img: "https://cdn.21st.dev/assets/mirror/bc/bcf87ca89edb1534792fa7cb4d473ca6afa1180df8e72a2ba9be1b28ab29a20d.gif",
link: "#",
bgColor: "bg-[#023fee]",
},
{
img: "https://cdn.21st.dev/assets/mirror/d1/d11de76c84939f4322529d8b2289c90dc5b089603a07cc18a2433f872848578e.svg",
link: "#",
bgColor: "bg-[#060d1c]",
},
{
img: "https://cdn.21st.dev/assets/mirror/37/377fe916ebf4030f34f3dcf7faf783b0ace5b59ddb1674a1e1403471cadba9d1.png",
link: "#",
bgColor: "bg-[#0e132a]",
},
{
img: "https://cdn.21st.dev/assets/mirror/92/926d6a38c952169e6a619ac7b0c52bcfd3933a35e20c8a752957246ae7172250.png",
link: "#",
bgColor: "bg-[#060d1c]",
},
{
img: "https://cdn.21st.dev/assets/mirror/e5/e5fa0e9da596e261aa4378b43fed298af47746a6a5d97b9424e9c71cdc25306a.png",
link: "#",
bgColor: "bg-[#ffffff]",
},
{
img: "https://cdn.21st.dev/assets/mirror/5c/5cc96582289548bb8b2bfb677618a79d4b43a999547d570c4562e90e7a11106a.png",
link: "#",
bgColor: "bg-[#006fee]",
},
]
export default function FloatingElementsDemo() {
return (
<FloatingElements title="Trusted by" className="py-20">
{logos.map((logo, i) => (
<a
key={i}
href={logo.link}
className={cn(
`relative flex h-36 w-36 items-center justify-center rounded-full shadow-[0_4px_12px_rgba(0,0,0,0.08)] transition duration-500 ease-in-out hover:scale-100 sm:hover:scale-110`,
logo.bgColor
)}
>
<img
src={logo.img}
alt={`${logo.link} logo`}
className="h-28 w-28 object-contain"
/>
</a>
))}
</FloatingElements>
)
}
