91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import type { IconType } from "react-icons";
|
|
import {
|
|
FaDiscord,
|
|
FaLinkedin,
|
|
FaRedditAlien,
|
|
FaTelegramPlane,
|
|
FaTwitter,
|
|
} from "react-icons/fa";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const integrations = [
|
|
{
|
|
name: "Figma",
|
|
logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
|
|
description:
|
|
"گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
},
|
|
{
|
|
name: "TailwindCSS",
|
|
logo: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
|
|
description:
|
|
"ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
},
|
|
{
|
|
name: "shadcn/ui",
|
|
logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
|
|
description:
|
|
"نمای اجرایی برای تصمیمهای سریع طراحی کنید.",
|
|
},
|
|
];
|
|
|
|
const socialPlatforms: { name: string; icon: IconType }[] = [
|
|
{ name: "Discord", icon: FaDiscord },
|
|
{ name: "Reddit", icon: FaRedditAlien },
|
|
{ name: "Twitter", icon: FaTwitter },
|
|
{ name: "Telegram", icon: FaTelegramPlane },
|
|
{ name: "LinkedIn", icon: FaLinkedin },
|
|
];
|
|
|
|
interface Feature92Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature92 = ({ className }: Feature92Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("border-y bg-muted/50 py-32", className)}
|
|
>
|
|
<div className="container">
|
|
<div>
|
|
<h2 className="text-3xl font-bold lg:text-xl">تصمیم استراتژیک را دادهمحور کنید</h2>
|
|
<p className="text-3xl text-muted-foreground lg:text-xl">
|
|
هر تیم داشبورد خودش را داشته باشد
|
|
</p>
|
|
</div>
|
|
<div className="mt-10 mb-8 grid gap-7 lg:grid-cols-3">
|
|
{integrations.map((integration) => (
|
|
<div key={integration.name} className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-xl font-semibold">
|
|
<img
|
|
src={integration.logo}
|
|
alt={`لوگوی ${integration.name}`}
|
|
className="h-5 w-auto"
|
|
/>
|
|
{integration.name}
|
|
</div>
|
|
<p>{integration.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ul className="grid grid-cols-2 items-center gap-7 text-muted-foreground md:grid-cols-3 lg:grid-cols-6">
|
|
{socialPlatforms.map((platform) => (
|
|
<li
|
|
key={platform.name}
|
|
className="flex items-center gap-2 font-medium"
|
|
>
|
|
<platform.icon className="size-6 shrink-0" />
|
|
{platform.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature92 };
|