112 lines
4.9 KiB
TypeScript
112 lines
4.9 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const feature95Tabs = [
|
|
{
|
|
title: "تحلیل کانال",
|
|
description: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
},
|
|
{
|
|
title: "اتوماسیون ایمیل",
|
|
description:
|
|
"ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
},
|
|
{
|
|
title: "A/B تست",
|
|
description:
|
|
"مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
},
|
|
{
|
|
title: "تقویم محتوا",
|
|
description:
|
|
"عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature95Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature95 = ({ className }: Feature95Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mb-16 max-w-xl text-right">
|
|
<Badge variant="outline">کمپین</Badge>
|
|
<h2 className="mt-6 mb-3 text-3xl font-medium tracking-tight text-balance md:text-xl">
|
|
کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
|
|
</h2>
|
|
<p className="text-pretty text-muted-foreground">
|
|
با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Tabs dir="rtl" defaultValue="0" className="flex-col">
|
|
<TabsList
|
|
variant="line"
|
|
className="relative grid !h-auto w-full items-start gap-6 rounded-none p-0 lg:grid-cols-4"
|
|
>
|
|
<div className="absolute start-4 end-0 top-7 hidden h-px bg-linear-to-l from-input from-80% to-transparent lg:block" />
|
|
<div className="absolute start-3.5 top-0 bottom-0 w-px bg-gradient-to-b from-input from-80% to-transparent lg:hidden" />
|
|
{feature95Tabs.map((tab, index) => (
|
|
<TabsTrigger
|
|
key={tab.title}
|
|
value={index.toString()}
|
|
className="group flex !h-auto cursor-pointer flex-col items-start rounded-none border-none p-0 whitespace-normal text-foreground after:hidden"
|
|
>
|
|
<div className="flex gap-4 rounded-md text-right hover:bg-muted lg:block lg:p-4">
|
|
<div className="flex flex-col items-center lg:contents">
|
|
<span className="flex size-7 shrink-0 items-center justify-center rounded-full border bg-background font-mono text-xs font-medium group-data-[state=active]:bg-primary group-data-[state=active]:text-background group-data-[state=active]:ring group-data-[state=active]:ring-muted-foreground/40">
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<h3 className="mb-1 font-semibold text-foreground lg:mt-4">
|
|
{tab.title}
|
|
</h3>
|
|
<p className="text-foreground-muted text-sm font-normal">
|
|
{tab.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 block rounded-md border bg-muted p-2 lg:hidden">
|
|
<div className="aspect-video">
|
|
<img
|
|
src={tab.image}
|
|
alt={`نمای ${tab.title}`}
|
|
className="h-full w-full rounded-md border object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{feature95Tabs.map((tab, index) => (
|
|
<TabsContent
|
|
key={tab.title}
|
|
value={index.toString()}
|
|
className="mt-10 hidden rounded-xl border bg-muted p-3 lg:block"
|
|
>
|
|
<div className="aspect-video">
|
|
<img
|
|
src={tab.image}
|
|
alt={`نمای ${tab.title}`}
|
|
className="h-full w-full rounded-xl border object-cover shadow"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature95 };
|