76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { PersonStanding, Timer, Zap, ZoomIn } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features: {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
}[] = [
|
|
{
|
|
icon: Timer,
|
|
title: "پیشنهاد عنوان",
|
|
description:
|
|
"ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "تحلیل کلمه کلیدی",
|
|
description:
|
|
"کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
|
|
},
|
|
{
|
|
icon: ZoomIn,
|
|
title: "ممیزی فنی",
|
|
description:
|
|
"خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
|
|
},
|
|
{
|
|
icon: PersonStanding,
|
|
title: "ردیابی رتبه",
|
|
description:
|
|
"تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
|
|
},
|
|
];
|
|
|
|
interface Feature10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature10 = ({ className }: Feature10Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<p className="mb-4 text-xs text-muted-foreground">ترافیک ارگانیک</p>
|
|
<h2 className="text-3xl font-medium lg:text-xl">
|
|
رتبه کلمات کلیدی را پیگیری کنید
|
|
</h2>
|
|
<div className="mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4">
|
|
{features.map(({ icon: Icon, title, description }) => (
|
|
<div
|
|
key={title}
|
|
className="relative flex gap-3 rounded-lg border-dashed md:block md:border-s md:p-5"
|
|
>
|
|
<span className="mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12">
|
|
<Icon className="size-5 md:size-6" />
|
|
</span>
|
|
<div>
|
|
<h3 className="font-medium md:mb-2 md:text-xl">
|
|
{title}
|
|
<span className="absolute -start-px hidden h-6 w-px bg-primary md:inline-block"></span>
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground md:text-base">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature10 };
|