118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DollarSign,
|
|
MessagesSquare,
|
|
PersonStanding,
|
|
Timer,
|
|
Zap,
|
|
ZoomIn,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
const features: Feature[] = [
|
|
{
|
|
title: "تحلیل کانال",
|
|
description:
|
|
"چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
|
|
icon: Timer,
|
|
},
|
|
{
|
|
title: "اتوماسیون ایمیل",
|
|
description:
|
|
"مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
title: "A/B تست",
|
|
description:
|
|
"ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
|
|
icon: ZoomIn,
|
|
},
|
|
{
|
|
title: "تقویم محتوا",
|
|
description:
|
|
"مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
|
|
icon: PersonStanding,
|
|
},
|
|
{
|
|
title: "ردیابی UTM",
|
|
description:
|
|
"عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
|
|
icon: DollarSign,
|
|
},
|
|
{
|
|
title: "گزارش ROI",
|
|
description:
|
|
"چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
|
|
icon: MessagesSquare,
|
|
},
|
|
];
|
|
|
|
interface Feature121Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature121 = ({ className }: Feature121Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("relative container py-32", className)}
|
|
>
|
|
<div className="m-auto grid w-full gap-px overflow-hidden rounded-md bg-border sm:max-w-[600px] sm:grid-cols-2">
|
|
{features.map((feature) => (
|
|
<Block key={feature.title} {...feature} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature121 };
|
|
|
|
function Block({ title, description, icon: Icon }: Feature) {
|
|
const [isBlockHover, setBlockHover] = useState(false);
|
|
const [isBlockClick, setBlockClick] = useState(false);
|
|
|
|
return (
|
|
<section
|
|
className="relative aspect-square h-auto cursor-pointer overflow-hidden bg-accent px-6 py-3.5 text-start transition duration-300 hover:bg-[#e9e9e9] sm:aspect-auto sm:h-[300px]"
|
|
onMouseOver={() => setBlockHover(true)}
|
|
onMouseOut={() => setBlockHover(false)}
|
|
onClick={() => setBlockClick((prev) => !prev)}
|
|
aria-label={title}
|
|
>
|
|
<p className="ms-auto text-lg text-balance">{title}</p>
|
|
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 m-auto flex size-36 min-h-36 min-w-36 shrink-0 items-center justify-center rounded-full bg-primary transition duration-300 sm:h-28 sm:min-h-28 sm:w-28 sm:min-w-28 md:size-12",
|
|
isBlockHover && "scale-110 shadow-xl",
|
|
isBlockClick && "-translate-y-40 opacity-0",
|
|
)}
|
|
>
|
|
<Icon className="size-8 invert md:size-10" />
|
|
</div>
|
|
|
|
<p
|
|
className={cn(
|
|
"absolute inset-0 m-auto h-fit translate-y-40 px-6 py-3.5 opacity-0 transition duration-300",
|
|
isBlockClick && "translate-y-0! opacity-100!",
|
|
)}
|
|
>
|
|
{description}
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|