105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
import {
|
|
FaDiscord,
|
|
FaGithub,
|
|
FaLinkedin,
|
|
FaSlack,
|
|
FaXTwitter,
|
|
} from "react-icons/fa6";
|
|
import { SiBluesky } from "react-icons/si";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const iconWrapper =
|
|
"mb-4 flex items-center justify-center h-16 w-16 rounded-full border-2 border-dotted border-muted-foreground/40 transition-colors duration-200";
|
|
|
|
interface Community6Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Community6 = ({ className }: Community6Props) => {
|
|
const communityCards = [
|
|
{
|
|
icon: <FaXTwitter className="h-8 w-8 text-foreground/80" />,
|
|
title: "X",
|
|
description: "آخرین مقالات، آموزش‌ها و به‌روزرسانی‌های محصول را دنبال کنید.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <FaGithub className="h-8 w-8 text-foreground/80" />,
|
|
title: "گیت‌هاب",
|
|
description: "در توسعه مشارکت کنید، Issue ثبت کنید و از پروژه حمایت کنید.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <FaDiscord className="h-8 w-8 text-foreground/80" />,
|
|
title: "دیسکورد",
|
|
description: "با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ پرسش‌های خود را دریافت کنید.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <FaLinkedin className="h-8 w-8 text-foreground/80" />,
|
|
title: "LinkedIn",
|
|
description: "از طریق لینکدین با تیم ما در ارتباط باشید و شبکه حرفه‌ای خود را توسعه دهید.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <FaSlack className="h-8 w-8 text-foreground/80" />,
|
|
title: "Slack",
|
|
description: "برای همکاری سریع و ارتباط مستقیم به فضای پیام‌رسان تیمی ما بپیوندید.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <SiBluesky className="h-8 w-8 text-foreground/80" />,
|
|
title: "Bluesky",
|
|
description: "ما را در Bluesky دنبال کنید و در گفتگوهای جامعه مشارکت داشته باشید.",
|
|
link: "#",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"relative overflow-hidden rounded-3xl bg-background py-32 text-foreground",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-10 container flex flex-col items-center justify-center">
|
|
<h2 className="mb-4 text-center text-xl font-bold tracking-tight md:text-2xll xl:text-2xll">
|
|
به جامعه حرفه‌ای ما بپیوندید
|
|
</h2>
|
|
<p className="mb-8 max-w-2xl text-center text-lg font-normal text-muted-foreground md:text-xl">
|
|
با توسعه‌دهندگان، طراحان و متخصصان سراسر جهان ارتباط برقرار کنید، دانش کسب کنید و پروژه‌های ارزشمند بسازید.
|
|
</p>
|
|
<div className="mb-10 grid w-full grid-cols-1 gap-6 md:grid-cols-3 xl:grid-cols-6">
|
|
{communityCards.map((card) => (
|
|
<Card
|
|
key={card.title}
|
|
className="group flex flex-1 flex-col items-center rounded-2xl bg-background p-8 transition-shadow duration-200 hover:shadow-lg"
|
|
>
|
|
<a
|
|
href={card.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex flex-col items-center"
|
|
>
|
|
<span className={`${iconWrapper} group-hover:bg-muted`}>
|
|
{card.icon}
|
|
</span>
|
|
<h5 className="mb-1 text-lg font-semibold">{card.title}</h5>
|
|
<p className="mb-2 text-center text-base text-muted-foreground">
|
|
{card.description}
|
|
</p>
|
|
</a>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Community6 };
|