83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const items = [
|
|
{
|
|
title: "پیشنهاد عنوان",
|
|
description:
|
|
"ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
|
|
imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
},
|
|
{
|
|
title: "تحلیل کلمه کلیدی",
|
|
description:
|
|
"کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
|
|
imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
},
|
|
{
|
|
title: "ممیزی فنی",
|
|
description:
|
|
"خطاهای فنی که رتبه را پایین میآورد را سریع شناسایی و رفع کنید.",
|
|
imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
},
|
|
];
|
|
|
|
interface Feature140Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature140 = ({ className }: Feature140Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<Carousel
|
|
className="relative w-full"
|
|
opts={{
|
|
direction: "rtl",
|
|
}}
|
|
>
|
|
<CarouselContent className="ease-in">
|
|
{items.map((item) => (
|
|
<CarouselItem key={item.title}>
|
|
<div className="flex flex-col items-center justify-between gap-4 rounded-2xl bg-muted py-20 ps-8 md:flex-row md:ps-16">
|
|
<div className="w-full pe-2 text-start md:max-w-xs md:pe-0">
|
|
<h2 className="mb-6 text-xl font-medium sm:text-xl md:text-2xll">
|
|
{item.title}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground md:text-base">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
<div className="w-full max-w-2xl">
|
|
<img
|
|
src={item.imgSrc}
|
|
alt={`نمای ${item.title}`}
|
|
className="h-80 max-h-[560px] w-full rounded-s-2xl object-cover md:h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<div className="absolute bottom-16 start-16 md:bottom-11">
|
|
<CarouselPrevious className="size-14" />
|
|
</div>
|
|
<div className="absolute end-16 bottom-16 md:bottom-11">
|
|
<CarouselNext className="size-14" />
|
|
</div>
|
|
</Carousel>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature140 };
|