60 lines
3.3 KiB
TypeScript
60 lines
3.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|