Files
reui-blocks/blocks/logos2.tsx
T

90 lines
2.6 KiB
TypeScript
Raw Normal View History

import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
const logos = [
{
id: "logo-1",
description: "لوگوی ۱",
image:
"/block-media/shadcnblocks/block/block-1.svg",
},
{
id: "logo-2",
description: "لوگوی ۲",
image:
"/block-media/shadcnblocks/block/block-2.svg",
},
{
id: "logo-3",
description: "لوگوی ۳",
image:
"/block-media/shadcnblocks/block/block-3.svg",
},
{
id: "logo-4",
description: "لوگوی ۴",
image:
"/block-media/shadcnblocks/block/block-4.svg",
},
{
id: "logo-5",
description: "لوگوی ۵",
image:
"/block-media/shadcnblocks/block/block-5.svg",
},
{
id: "logo-6",
description: "لوگوی ۶",
image:
"/block-media/shadcnblocks/block/block-6.svg",
},
];
interface Logos2Props {
className?: string;
}
const Logos2 = ({ className }: Logos2Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="grid overflow-hidden rounded-xl border border-border md:grid-cols-2">
<div className="my-auto px-6 py-10 sm:px-10 sm:py-12 lg:p-16">
<div className="w-full text-start md:max-w-md">
<h2 className="mb-4 text-xl font-semibold lg:text-3xl">
گواهی‌های ما گویای همه چیز است
</h2>
<p className="mb-6 text-lg">
کیفیت و استاندارد در هر مرحله برای ما اهمیت دارد. گواهینامه‌های
معتبر نشان‌دهنده تعهد ما به ارائه خدمات قابل اعتماد است.
</p>
<Button className="w-full md:w-fit">
تماس بگیرید
<ArrowRight className="ms-2 size-5 rtl:rotate-180" />
</Button>
</div>
</div>
<div className="grid grid-cols-3 border-t border-border md:border-s md:border-t-0">
{logos.map((logo) => (
<div
key={logo.id}
className="-mb-px flex items-center justify-center border-e border-b border-border p-5 nth-[3n]:border-e-0 sm:p-6"
>
<img
src={logo.image}
alt={logo.description}
className="size-12 object-cover object-center sm:size-16 lg:size-24"
></img>
</div>
))}
</div>
</div>
</div>
</section>
);
};
export { Logos2 };