87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const RESOURCES = [
|
|
{
|
|
title: "ردیابی UTM",
|
|
description:
|
|
"چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
|
|
href: "#",
|
|
imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
|
|
imageAlt: "تحلیل عملکرد کمپین",
|
|
},
|
|
{
|
|
title: "گزارش ROI",
|
|
description:
|
|
"مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
|
|
href: "#",
|
|
imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
|
|
imageAlt: "نمودار ROI",
|
|
},
|
|
{
|
|
title: "مدیریت کمپین",
|
|
description:
|
|
"ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
|
|
href: "#",
|
|
imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
|
|
imageAlt: "داشبورد بازاریابی دیجیتال",
|
|
},
|
|
];
|
|
|
|
interface Feature188Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature188 = ({ className }: Feature188Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h2 className="text-center text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
|
|
کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
|
|
</h2>
|
|
|
|
<div className="mx-auto mt-12 max-w-5xl rounded-2xl border">
|
|
{RESOURCES.map((resource, index) => (
|
|
<div
|
|
key={resource.title}
|
|
className={cn(index !== RESOURCES.length - 1 && "border-b")}
|
|
>
|
|
<a
|
|
href={resource.href}
|
|
className="flex flex-col p-4 md:flex-row md:items-center md:justify-between lg:p-6"
|
|
>
|
|
<div className="flex items-center">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted p-2 lg:h-14 lg:w-14">
|
|
<ArrowRight className="h-6 w-6 text-muted-foreground rtl:rotate-180" />
|
|
</div>
|
|
<div className="ms-6 text-start">
|
|
<h3 className="text-lg font-semibold lg:text-xl">
|
|
{resource.title}
|
|
</h3>
|
|
<p className="text-sm text-pretty text-muted-foreground lg:text-lg">
|
|
{resource.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 shrink-0 md:mt-0 md:w-60">
|
|
<div className="aspect-w-16 aspect-h-9 rounded-lg bg-muted">
|
|
<img
|
|
src={resource.imageSrc}
|
|
alt={resource.imageAlt}
|
|
className="h-full w-full rounded-md object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature188 };
|