107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const DATA = [
|
|
{
|
|
id: 1,
|
|
icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
|
|
title: "حساب ابری Sheets",
|
|
description:
|
|
"داده‌های خود را با حساب ابری Sheets همگام کنید و اتوماسیون را بدون دردسر انجام دهید.",
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
|
|
title: "Slack",
|
|
description:
|
|
"اعلان‌ها و به‌روزرسانی‌ها را مستقیم در کانال‌های پیام‌رسان تیمی دریافت کنید.",
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
|
|
title: "Sketch",
|
|
description:
|
|
"طراحی‌های طراحی برداری را وارد کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
|
|
title: "Gatsby",
|
|
description: "با یکپارچه‌سازی Gatsby وب‌سایت‌هایی سریع و بهینه بسازید.",
|
|
},
|
|
{
|
|
id: 5,
|
|
icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
|
|
title: "Shopify",
|
|
description:
|
|
"داده‌های فروشگاه Shopify را همگام کنید و مدیریت سفارش‌ها را ساده‌تر کنید.",
|
|
},
|
|
{
|
|
id: 6,
|
|
icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
|
|
title: "GitHub",
|
|
description:
|
|
"گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
|
|
},
|
|
{
|
|
id: 7,
|
|
icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
|
|
title: "Figma",
|
|
description:
|
|
"طراحی‌های طراحی رابط را همگام کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
|
|
},
|
|
{
|
|
id: 8,
|
|
icon: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
|
|
title: "Dropbox",
|
|
description:
|
|
"فایل‌های Dropbox را همگام کنید و مدیریت فایل‌ها را ساده‌تر کنید.",
|
|
},
|
|
];
|
|
|
|
interface Integration10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Integration10 = ({ className }: Integration10Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-12", className)}>
|
|
<div className="container mx-auto max-w-2xl">
|
|
<h2 className="mb-2 text-start text-xl font-semibold">
|
|
یکپارچه‌سازی‌ها
|
|
</h2>
|
|
<p className="mb-6 text-start text-muted-foreground">
|
|
فضای کاری خود را با یکپارچه‌سازی‌ها متصل کنید.
|
|
</p>
|
|
<div className="space-y-4">
|
|
{DATA.map(({ id, icon, title, description }) => (
|
|
<div
|
|
key={id}
|
|
className="flex flex-col items-start justify-between gap-4 rounded-xl border bg-background px-6 py-4 text-start shadow-sm md:flex-row md:items-center"
|
|
>
|
|
<div className="flex w-full flex-col items-start gap-4 md:w-auto md:flex-row md:items-center">
|
|
<img
|
|
src={icon}
|
|
alt={title}
|
|
className="h-10 w-10 shrink-0 object-contain"
|
|
/>
|
|
<div>
|
|
<h3 className="text-lg font-medium">{title}</h3>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="shrink-0 md:ms-4">
|
|
<Button variant="outline">اتصال</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Integration10 };
|