88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Logos13Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Logos13 = ({ className }: Logos13Props) => {
|
|
const logos = [
|
|
{
|
|
id: "logo-1",
|
|
description: "۲۲۱",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-2",
|
|
description: "۲۲۲",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-3",
|
|
description: "۲۲۳",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-4",
|
|
description: "۲۲۴",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-5",
|
|
description: "۲۲۵",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-6",
|
|
description: "۲۲۶",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
|
|
className: "h-5 w-auto dark:invert",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
|
|
<div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 text-start lg:sticky">
|
|
<span className="size-3 bg-orange-500" />
|
|
<p className="text-xl text-foreground/30 lg:text-xl">شرکای ما</p>
|
|
</div>
|
|
<ul className="col-span-4 grid w-full grid-cols-2 gap-2 lg:grid-cols-3">
|
|
{logos.map((logo, index) => (
|
|
<li
|
|
key={index}
|
|
className="relative flex h-72 items-center justify-center rounded-2xl bg-muted"
|
|
>
|
|
<div className="">
|
|
<img
|
|
src={logo.image}
|
|
alt={`لوگوی شریک سال ${logo.description}`}
|
|
className={logo.className}
|
|
/>
|
|
</div>
|
|
|
|
<p className="absolute bottom-4 start-4 font-mono text-sm tracking-tight text-foreground/40">
|
|
{logo.description}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Logos13 };
|