Files
reui-blocks/blocks/logos2.tsx
T

90 lines
2.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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 };