104 lines
4.8 KiB
TypeScript
104 lines
4.8 KiB
TypeScript
import { Atom, ChevronRight, Settings, Zap } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature116Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature116 = ({ className }: Feature116Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h1 className="mb-4 text-center text-xl font-semibold">
|
|
رتبه کلمات کلیدی را پیگیری کنید
|
|
</h1>
|
|
<p className="text-center text-muted-foreground">
|
|
با SEO دقیقتر رشد کنید
|
|
</p>
|
|
<div className="grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0">
|
|
<a
|
|
href="#"
|
|
className="group relative col-span-2 row-span-3 overflow-hidden rounded-xl"
|
|
>
|
|
<img
|
|
src="/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg"
|
|
alt="داشبورد SEO"
|
|
className="h-full max-h-[580px] w-full rounded-xl object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
|
|
<div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
|
|
<span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
|
|
<Atom className="h-auto w-6" />
|
|
ترافیک ارگانیک
|
|
</span>
|
|
<div className="flex flex-col gap-5 text-background">
|
|
<h4 className="text-xl font-semibold lg:text-3xl">
|
|
پیشنهاد عنوان
|
|
</h4>
|
|
<p className="flex items-center gap-1 font-medium">
|
|
تحلیل کلمه کلیدی
|
|
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div className="grid gap-y-5 xl:row-span-2">
|
|
<a href="#" className="group relative overflow-hidden rounded-xl">
|
|
<img
|
|
src="/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg"
|
|
alt="تحلیل کلمات کلیدی"
|
|
className="h-full max-h-44 w-full rounded-xl object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" />
|
|
<div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
|
|
<span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
|
|
<Settings className="h-auto w-6" />
|
|
رتبهبندی
|
|
</span>
|
|
<div className="flex flex-col gap-5 text-background">
|
|
<h4 className="text-xl font-semibold lg:text-3xl">
|
|
ممیزی فنی
|
|
</h4>
|
|
<p className="flex items-center gap-1 font-medium">
|
|
ردیابی رتبه
|
|
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="group relative row-span-2 overflow-hidden rounded-xl"
|
|
>
|
|
<img
|
|
src="/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg"
|
|
alt="گزارش رتبه جستجو"
|
|
className="h-full max-h-96 w-full rounded-xl object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
|
|
<div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
|
|
<span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
|
|
<Zap className="h-auto w-6 fill-background" />
|
|
محتوای SEO
|
|
</span>
|
|
<div className="flex flex-col gap-5 text-background">
|
|
<h4 className="text-xl font-semibold lg:text-3xl">
|
|
بهینهسازی محتوا
|
|
</h4>
|
|
<p className="flex items-center gap-1 font-medium">
|
|
تحلیل رقیب
|
|
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature116 };
|