90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { Eye, Keyboard, Volume2 } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Item {
|
|
id: string;
|
|
title: string;
|
|
summary: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
const FEATURES: Item[] = [
|
|
{
|
|
id: "keyboard-navigation",
|
|
title: "تقویم تیمی",
|
|
summary:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
icon: Keyboard,
|
|
},
|
|
{
|
|
id: "screen-reader",
|
|
title: "اشتراک فایل",
|
|
summary:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
icon: Volume2,
|
|
},
|
|
{
|
|
id: "color-contrast",
|
|
title: "منشن و بحث",
|
|
summary:
|
|
"کار گروهی",
|
|
icon: Eye,
|
|
},
|
|
];
|
|
|
|
interface Feature217bProps {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature217b = ({ className }: Feature217bProps) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn(className)}>
|
|
<div
|
|
className="relative bg-cover bg-center bg-no-repeat py-20 after:absolute after:inset-0 after:z-10 after:block after:size-full after:bg-black/50 after:content-[''] md:py-24 xl:py-32"
|
|
style={{
|
|
backgroundImage:
|
|
"url('/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png')",
|
|
}}
|
|
>
|
|
<div className="relative z-20 container">
|
|
<div className="flex flex-col gap-16">
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<h2 className="mb-6 text-xl tracking-tight text-balance text-white md:text-2xll">
|
|
همکاری از راه دور را ساده کنید
|
|
</h2>
|
|
<p className="text-lg font-medium tracking-tight text-pretty text-white">
|
|
اعلانهای هوشمند فقط اطلاعات ضروری را میرسانند و حواسپرتی را کم میکنند.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid items-stretch gap-8 lg:grid-cols-3">
|
|
{FEATURES.map((item) => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm"
|
|
>
|
|
<Icon className="size-8 stroke-white" />
|
|
<div className="max-w-sm text-center text-xl font-medium text-balance text-white">
|
|
{item.title}
|
|
</div>
|
|
<div className="max-w-sm text-center text-sm text-pretty text-white/70">
|
|
{item.summary}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature217b };
|