83 lines
3.9 KiB
TypeScript
83 lines
3.9 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const images = [
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-2.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-7.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-9.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-10.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-11.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-12.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-13.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-14.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-15.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-16.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-17.svg",
|
|
"/block-media/shadcnblocks/block/logos/integration/integration-18.svg",
|
|
];
|
|
|
|
interface Integration5Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Integration5 = ({ className }: Integration5Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center justify-between gap-14 md:flex-row lg:gap-20">
|
|
<div className="basis-1/2 text-start">
|
|
<p className="font-mono text-sm text-muted-foreground">
|
|
یکپارچهسازیها
|
|
</p>
|
|
<h1 className="mt-4 mb-10 text-3xl font-bold text-pretty md:text-xl">
|
|
یکپارچهسازیها را برای پروژه بعدیتان کاوش کنید
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground">
|
|
با یکپارچهسازیهای آماده برای پروژه بعدی زمان بیشتری ذخیره
|
|
کنید و سریعتر شروع کنید.
|
|
</p>
|
|
<div className="mt-5 flex flex-wrap items-center gap-2">
|
|
<Button>شروع کنید</Button>
|
|
<Button variant="outline" className="gap-2">
|
|
بیشتر بدانید
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex basis-1/2 flex-wrap justify-center gap-2 md:max-w-xl md:justify-start">
|
|
{images.map((image, index) => (
|
|
<div key={index} className="relative size-20">
|
|
<svg
|
|
viewBox="0 0 80 80"
|
|
className="text-muted-foreground/40"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M75.43,79.22H4.57c-2.09,0-3.79-1.7-3.79-3.79V12.9c0-1,.4-1.98,1.11-2.68L10.22,1.89c.71-.71,1.68-1.11,2.68-1.11h62.54c2.09,0,3.79,1.7,3.79,3.79v70.87c0,2.09-1.7,3.79-3.79,3.79ZM12.9,1.78c-.73,0-1.45.3-1.97.82L2.59,10.92c-.52.52-.82,1.24-.82,1.97v62.54c0,1.54,1.25,2.79,2.79,2.79h70.87c1.54,0,2.79-1.25,2.79-2.79V4.57c0-1.54-1.25-2.79-2.79-2.79H12.9Z"
|
|
/>
|
|
</svg>
|
|
<img
|
|
src={image}
|
|
alt={`لوگوی یکپارچهسازی ${index + 1}`}
|
|
className="absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Integration5 };
|