123 lines
4.6 KiB
TypeScript
123 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Forward } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const IMAGES = [
|
|
{
|
|
id: "side-start-main",
|
|
src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
|
|
imageAlt: "تحلیل عملکرد کمپین",
|
|
className:
|
|
"absolute -start-10 top-1/2 h-52 w-40 -translate-y-1/2 translate-x-full overflow-hidden rounded-2xl",
|
|
},
|
|
{
|
|
id: "corner-start-top",
|
|
src: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
|
|
imageAlt: "نمودار ROI",
|
|
className:
|
|
"absolute -top-3 start-10 size-28 -translate-y-full translate-x-full overflow-hidden rounded-2xl",
|
|
},
|
|
{
|
|
id: "corner-start-bottom",
|
|
src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
|
|
imageAlt: "داشبورد بازاریابی دیجیتال",
|
|
className:
|
|
"absolute -bottom-3 start-10 size-32 translate-x-full translate-y-full overflow-hidden rounded-2xl",
|
|
},
|
|
{
|
|
id: "side-end-main",
|
|
src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
|
|
imageAlt: "تحلیل عملکرد کمپین",
|
|
className:
|
|
"absolute -end-10 top-1/2 h-52 w-45 -translate-x-full -translate-y-1/2 overflow-hidden rounded-2xl",
|
|
},
|
|
{
|
|
id: "corner-end-top",
|
|
src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
|
|
imageAlt: "نمودار ROI",
|
|
className:
|
|
"absolute -top-3 end-10 size-28 -translate-x-full -translate-y-full overflow-hidden rounded-2xl",
|
|
},
|
|
{
|
|
id: "corner-end-bottom",
|
|
src: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
|
|
imageAlt: "داشبورد بازاریابی دیجیتال",
|
|
className:
|
|
"absolute -bottom-3 end-10 size-32 -translate-x-full translate-y-full overflow-hidden rounded-2xl",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature283Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature283 = ({ className }: Feature283Props) => {
|
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("h-screen overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container flex h-full w-full flex-col items-center justify-center px-4">
|
|
<div className="relative flex flex-col items-center justify-center">
|
|
<h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter text-balance md:text-2xll">
|
|
کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
|
|
</h2>
|
|
<p className="mx-auto mt-2 max-w-xl px-5 text-center text-pretty text-sm text-muted-foreground/50 md:text-base">
|
|
با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
|
|
</p>
|
|
<Button className="mt-10 h-10 gap-2 rounded-xl">
|
|
گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.
|
|
<Forward className="size-4 rtl:rotate-180" />
|
|
</Button>
|
|
<div>
|
|
{IMAGES.map((image, index) => (
|
|
<motion.div
|
|
drag
|
|
key={image.id}
|
|
initial={{ y: "50%", opacity: 0, scale: 0.8 }}
|
|
whileInView={{ y: 0, opacity: 1, scale: 1 }}
|
|
transition={{
|
|
duration: 0.2,
|
|
ease: "easeOut",
|
|
delay: index * 0.1 + 0.5,
|
|
}}
|
|
animate={{
|
|
filter:
|
|
hoveredIndex !== null && hoveredIndex !== index
|
|
? "blur(10px)"
|
|
: "blur(0px)",
|
|
scale: hoveredIndex === index ? 1.05 : 1,
|
|
transition: {
|
|
duration: 0.3,
|
|
ease: "easeOut",
|
|
delay: 0,
|
|
},
|
|
}}
|
|
onHoverStart={() => setHoveredIndex(index)}
|
|
onHoverEnd={() => setHoveredIndex(null)}
|
|
className={image.className}
|
|
>
|
|
<img
|
|
src={image.src}
|
|
alt={image.imageAlt}
|
|
className="pointer-events-none size-full object-cover"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature283 };
|