71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { Marquee } from "@/components/ui/marquee";
|
|
|
|
const images = [
|
|
{
|
|
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV9uzErWz9EXqZDxZ5lP9aYpMz8eK6rr5X3w&s",
|
|
},
|
|
{
|
|
img: "https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8ed3d547-94ff-48e1-9f20-8c14a7030a02_2000x2000.jpeg",
|
|
},
|
|
{
|
|
img: "https://cdn.vectorstock.com/i/1000v/48/43/google-symbol-logo-black-and-white-design-vector-46334843.jpg",
|
|
},
|
|
{
|
|
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQADFN8_BR0poY4_U86hIDw6bB-iXS2UUXmoQ&s",
|
|
},
|
|
{
|
|
img: "https://miro.medium.com/v2/resize:fit:1400/1*O-ClkORJkmUm1wRsApB_yQ.png",
|
|
},
|
|
{
|
|
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9R9N0XiqvtWH8Qr0zHTfYLxoPh__Hc4HayrA1AwxNwSmpLVSR9jg4HoxK4zCx5AQVdJ0&usqp=CAU",
|
|
},
|
|
];
|
|
|
|
// Card Component for displaying each partner's logo
|
|
const FaceCard = ({ img }: { img: string }) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative h-28 w-28 cursor-pointer overflow-hidden rounded-xl flex items-center justify-center", // Made cards square
|
|
)}
|
|
>
|
|
<img className="h-full w-full object-cover" alt="" src={img} /> {/* Removed alt text and made image fill the card */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export function Faces() {
|
|
const firstRow = images.slice(0, Math.ceil(images.length / 2));
|
|
const secondRow = images.slice(Math.ceil(images.length / 2));
|
|
|
|
return (
|
|
<div className="relative flex h-[500px] w-full flex-row items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
|
|
{/* First Vertical Marquee */}
|
|
<Marquee pauseOnHover vertical className="[--duration:20s]">
|
|
{firstRow.map((partner, index) => (
|
|
<FaceCard key={index} {...partner} />
|
|
))}
|
|
</Marquee>
|
|
|
|
<Marquee reverse pauseOnHover vertical className="[--duration:20s]">
|
|
{secondRow.map((partner, index) => (
|
|
<FaceCard key={index} {...partner} />
|
|
))}
|
|
</Marquee>
|
|
|
|
<Marquee pauseOnHover vertical className="[--duration:20s]">
|
|
{firstRow.map((partner, index) => (
|
|
<FaceCard key={index} {...partner} />
|
|
))}
|
|
</Marquee>
|
|
|
|
{/* Gradients for top and bottom fade effect */}
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-t from-transparent to-[#080E12]"></div>
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-b from-transparent to-[#080E12]"></div>
|
|
</div>
|
|
);
|
|
}
|