Files
reui-blocks/blocks/services4.tsx
T

90 lines
3.7 KiB
TypeScript

"use client";
import { Code, Cog, PenTool, Shrub } from "lucide-react";
import { cn } from "@/lib/utils";
interface Services4Props {
className?: string;
}
const Services4 = ({ className }: Services4Props) => {
const services = [
{
icon: <Cog className="h-6 w-6" />,
title: "نقشه سفر مشتری",
description:
"نقاط تماس و تریگرهای رفتاری را تعریف می‌کنیم تا هر پیام در زمان درست و با نیت مشخص ارسال شود.",
items: ["بخش‌بندی مخاطب", "تریگر رویداد", "قوانین توقف"],
},
{
icon: <PenTool className="h-6 w-6" />,
title: "جریان پرورش سرنخ",
description:
"مسیرهای ایمیل و درون‌محصولی می‌سازیم که سرنخ‌های سرد را تا آمادگی فروش گرم کنند.",
items: ["سری خوش‌آمدگویی", "بازفعال‌سازی", "فروش افزایشی"],
},
{
icon: <Code className="h-6 w-6" />,
title: "یکپارچگی با سامانه مدیریت ارتباط با مشتری",
description:
"امتیازدهی و تحویل سرنخ را به فروش وصل می‌کنیم تا هیچ فرصت گرمی از دست نرود.",
items: ["امتیازدهی سرنخ", "همگام‌سازی فیلدها", "اعلان فروش"],
},
{
icon: <Shrub className="h-6 w-6" />,
title: "بهینه‌سازی تبدیل",
description:
"با آزمایش ساختاریافته، نرخ باز شدن و تبدیل جریان‌ها را به‌صورت مستمر بالا می‌بریم.",
items: ["آزمایش A/B", "گزارش تبدیل", "کالیبراسیون امتیاز"],
},
];
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="mx-auto max-w-6xl space-y-12">
<div className="space-y-4 text-center">
<h2 className="text-3xl font-semibold tracking-tight md:text-xl">
اتوماسیون بازاریابی
</h2>
<p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
جریان‌های پرورش و تریگرهای رفتاری را می‌سازیم تا فروش فقط با
خریداران آماده کار کند.
</p>
</div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
{services.map((service, index) => (
<div
key={index}
className="space-y-6 rounded-lg border border-border p-8 transition-shadow hover:shadow-sm"
>
<div className="flex items-center gap-4">
<div className="rounded-full bg-muted p-3">
{service.icon}
</div>
<h3 className="text-xl font-semibold">{service.title}</h3>
</div>
<p className="leading-relaxed text-muted-foreground">
{service.description}
</p>
<div className="space-y-2">
{service.items.map((item, itemIndex) => (
<div key={itemIndex} className="flex items-center gap-2">
<div className="h-1.5 w-1.5 rounded-full bg-foreground" />
<span className="text-sm font-medium">{item}</span>
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
</section>
);
};
export { Services4 };