124 lines
4.2 KiB
TypeScript
124 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type LogosSimpleStaticLogo = Logo & {
|
|
href?: string;
|
|
};
|
|
interface Logo {
|
|
src: string;
|
|
alt: string;
|
|
srcDark?: string;
|
|
className?: string;
|
|
}
|
|
|
|
interface LogosSimpleStaticProps {
|
|
heading: string;
|
|
subtitle?: string;
|
|
logos: LogosSimpleStaticLogo[];
|
|
className?: string;
|
|
}
|
|
|
|
type Props = Partial<LogosSimpleStaticProps>;
|
|
|
|
const defaultProps: LogosSimpleStaticProps = {
|
|
heading: "همراهان ما در طلافروشی و جواهر",
|
|
subtitle: "فروشگاهها و برندهایی که برای ویترین و دکور به مستر دکور اعتماد کردهاند",
|
|
logos: [
|
|
{
|
|
src: "/assets/main-pic/logoHam/garoosyLogo.svg",
|
|
alt: "لوگوی همکار ۱",
|
|
className: "h-20 w-auto",
|
|
},
|
|
{
|
|
src: "/assets/main-pic/logoHam/garoosyLogo.svg",
|
|
alt: "لوگوی همکار ۲",
|
|
className: "h-20 w-auto",
|
|
},
|
|
{
|
|
src: "/assets/main-pic/logoHam/garoosyLogo.svg",
|
|
alt: "لوگوی همکار ۳",
|
|
className: "h-20 w-auto",
|
|
},
|
|
{
|
|
src: "/assets/main-pic/logoHam/garoosyLogo.svg",
|
|
alt: "لوگوی همکار ۴",
|
|
className: "h-20 w-auto",
|
|
},
|
|
{
|
|
src: "/assets/main-pic/logoHam/garoosyLogo.svg",
|
|
alt: "لوگوی همکار ۵",
|
|
className: "h-20 w-auto",
|
|
},
|
|
{
|
|
src: "/assets/main-pic/logoHam/garoosyLogo.svg",
|
|
alt: "لوگوی همکار ۶",
|
|
className: "h-20 w-auto",
|
|
},
|
|
],
|
|
};
|
|
|
|
const Logos21 = (props: Props) => {
|
|
const { heading, subtitle, logos, className } = {
|
|
...defaultProps,
|
|
...props,
|
|
};
|
|
|
|
const MAX_LOGOS = 6;
|
|
const DARK_LOGO_KEYWORDS = ["kalantari", "bakhtar"];
|
|
const lightLogos = logos.filter(
|
|
(logo) => !DARK_LOGO_KEYWORDS.some((keyword) => logo.src.toLowerCase().includes(keyword)),
|
|
);
|
|
const darkLogos = logos.filter((logo) =>
|
|
DARK_LOGO_KEYWORDS.some((keyword) => logo.src.toLowerCase().includes(keyword)),
|
|
);
|
|
|
|
const visibleLogos = [...lightLogos, ...darkLogos].slice(0, MAX_LOGOS);
|
|
|
|
return (
|
|
<section className={cn("section-blur-separator py-20 md:py-24 lg:py-28", className)} dir="rtl">
|
|
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6">
|
|
<div className="relative isolate">
|
|
<div className="relative overflow-hidden rounded-3xl border border-primary/30 bg-overlay/25 px-5 py-8 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 sm:px-8 sm:py-10">
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute -right-24 -top-24 z-0 h-80 w-80 rounded-full bg-primary/8 blur-3xl sm:h-[24rem] sm:w-[24rem]"
|
|
/>
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute -bottom-24 -left-24 z-0 h-80 w-80 rounded-full bg-primary/8 blur-3xl sm:h-[24rem] sm:w-[24rem]"
|
|
/>
|
|
<div className="relative z-10 flex flex-col items-center text-center">
|
|
<h2 className="text-heading-2 font-semibold text-foreground">
|
|
{heading}
|
|
</h2>
|
|
{subtitle ? (
|
|
<p className="mt-3 text-body text-muted-foreground">{subtitle}</p>
|
|
) : null}
|
|
<div className="mx-auto mt-8 grid w-full max-w-4xl grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-3 sm:gap-x-8 sm:gap-y-7 lg:gap-x-10 lg:gap-y-8">
|
|
{visibleLogos.map((logo, index) => (
|
|
<div
|
|
key={`${logo.src}-${logo.alt}-${index}`}
|
|
className="group flex min-h-40 items-center justify-center px-3 py-4"
|
|
>
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
className={cn(
|
|
logo.className,
|
|
"h-auto max-h-24 w-full object-contain object-center grayscale saturate-0 brightness-[2.1] contrast-75 opacity-95 transition duration-300 group-hover:brightness-100 group-hover:contrast-100 group-hover:opacity-100 group-hover:grayscale-0 group-hover:saturate-100 sm:max-h-28",
|
|
)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Logos21 };
|