122 lines
4.6 KiB
TypeScript
122 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const items = [
|
|
{
|
|
id: "shadcn",
|
|
title: "shadcn/ui",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
|
|
imageAlt: "تحلیل عملکرد کمپین",
|
|
logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
|
|
logoAlt: "کمپین",
|
|
},
|
|
{
|
|
id: "astro",
|
|
title: "Astro",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg",
|
|
imageAlt: "نمودار ROI",
|
|
logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|
logoAlt: "رشد برند",
|
|
},
|
|
{
|
|
id: "city",
|
|
title: "ردیابی UTM",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
|
|
imageAlt: "داشبورد بازاریابی دیجیتال",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature81Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature81 = ({ className }: Feature81Props) => {
|
|
const [activeId, setActiveId] = useState<string>(items[0].id);
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container flex flex-col items-center gap-8 md:gap-16 lg:px-16">
|
|
<div className="flex flex-col items-center text-center">
|
|
<p className="mb-6 text-xs font-medium tracking-wider">
|
|
بازاریابی دیجیتال
|
|
</p>
|
|
<h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
|
|
گزارش ROI
|
|
</h3>
|
|
<p className="mb-8 text-muted-foreground lg:text-lg">
|
|
با سگمنتبندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان میدهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
|
|
</p>
|
|
</div>
|
|
<div className="flex w-full min-w-0 flex-col gap-4 sm:gap-6 lg:h-80 lg:flex-row lg:gap-8">
|
|
{items.map((item) => {
|
|
const isOpen = activeId === item.id;
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
data-state={isOpen ? "open" : "closed"}
|
|
aria-label={item.title}
|
|
onClick={() => setActiveId(item.id)}
|
|
className={cn(
|
|
"group relative min-w-0 cursor-pointer overflow-clip rounded-lg text-start transition-all duration-500 ease-out",
|
|
isOpen
|
|
? "h-56 flex-2 lg:h-full lg:min-h-0"
|
|
: "h-28 flex-1 lg:h-full lg:min-h-0",
|
|
)}
|
|
>
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="absolute inset-0 size-full object-cover object-center transition-transform duration-500 group-data-[state=closed]:scale-105"
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"relative z-10 flex size-full flex-col items-start gap-4 px-4 py-5 transition-colors duration-500 md:p-6 lg:p-8",
|
|
isOpen
|
|
? "justify-between bg-black/60 hover:bg-black/65"
|
|
: "justify-end bg-black/75 hover:bg-black/80",
|
|
)}
|
|
>
|
|
{"logo" in item && item.logo && (
|
|
<img
|
|
src={item.logo}
|
|
alt={item.logoAlt}
|
|
className={cn(
|
|
"h-6 max-w-48 invert transition-all duration-500 sm:h-8 md:h-10",
|
|
isOpen
|
|
? "mb-8 opacity-100"
|
|
: "mb-0 h-0 max-h-0 opacity-0",
|
|
)}
|
|
/>
|
|
)}
|
|
<div
|
|
className={cn(
|
|
"flex items-center text-xs font-medium text-white transition-all duration-500 md:text-base lg:text-lg",
|
|
isOpen
|
|
? "translate-y-0 opacity-100"
|
|
: "pointer-events-none h-0 translate-y-2 overflow-hidden opacity-0",
|
|
)}
|
|
>
|
|
جذب مخاطب
|
|
<ArrowRight className="ms-2 size-4 shrink-0 transition-transform group-hover:translate-x-1 group-data-[state=open]:group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 rtl:group-data-[state=open]:group-hover:-translate-x-1" />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature81 };
|