49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
|
import { Marquee } from "@/components/ui/logo-marquee";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
const companies = [
|
||
|
|
{ url: "/images/svg/googleplus logo.svg" },
|
||
|
|
{ url: "/images/svg/linkedin-plain-wordmark logo.svg" },
|
||
|
|
{ url: "/images/svg/metallb-horizontal-white logo.svg" },
|
||
|
|
{ url: "/images/svg/microsoft logo.svg" },
|
||
|
|
// add more logopngeeded
|
||
|
|
];
|
||
|
|
|
||
|
|
const SocialProff = () => {
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
id="logos"
|
||
|
|
className="tab:px-6 relative z-20 mx-auto w-full max-w-[1420px] py-2 sm:px-2.5 lg:px-0"
|
||
|
|
>
|
||
|
|
<div className="tab:flex-row flex w-full flex-col items-center justify-between gap-2 md:gap-0">
|
||
|
|
<h3 className="font-switzer leading-b2 tab:w-3/12 tab:text-left tab:px-0 text-xl font-semibold text-black sm:w-full sm:px-7 sm:text-center lg:w-2/12">
|
||
|
|
Trusted by more than <span className="text-black">5k+</span> satisfied
|
||
|
|
clients
|
||
|
|
</h3>
|
||
|
|
<div className="tab:w-8/12 relative mt-2 overflow-hidden sm:w-full">
|
||
|
|
<Marquee gap="3rem" className="max-w-full [--duration:10s]">
|
||
|
|
{companies.map((company, idx) => (
|
||
|
|
<Image
|
||
|
|
key={idx}
|
||
|
|
width={112}
|
||
|
|
height={42}
|
||
|
|
src={company.url}
|
||
|
|
className="w-full object-contain grayscale transition-all duration-300 hover:grayscale-0 sm:h-10 md:h-10"
|
||
|
|
alt={`Company logo ${idx + 1}`}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</Marquee>
|
||
|
|
|
||
|
|
{/* left gradient fade */}
|
||
|
|
<div className="pointer-events-none absolute inset-y-0 left-0 h-full w-1/4 bg-gradient-to-r from-white to-transparent"></div>
|
||
|
|
|
||
|
|
{/* right gradient fade */}
|
||
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 h-full w-1/4 bg-gradient-to-l from-white to-transparent"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SocialProff;
|